The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
5 posters

    Add a color + image to a specific group at the top of posts without JavaScript

    كونان2000
    كونان2000
    Forumember


    Male Posts : 204
    Reputation : 93
    Language : Arabic

    Add a color + image to a specific group at the top of posts without JavaScript Empty Add a color + image to a specific group at the top of posts without JavaScript

    Post by ÙƒÙˆÙ†Ø§Ù†2000 April 11th 2024, 12:17 am

    Hello everyone

    With this trick, you can add a color to a specific group that appears at the top of posts
    and You can also add photos to a specific group,

    I know it's a common trick, but it was using JavaScript

    Now you don't need to use JavaScript-jQuery

    A trick I discovered that I wanted to share with you Bingo

    Add a color + image to a specific group at the top of posts without JavaScript Ocia_a12
    ----------------------------------------------




    phpBB2:



    All versions
    -------------

    Find the next part in viewtopic_body template
    Code:
    <!-- BEGIN displayed -->

    replace it with
    Code:
     
    <!-- BEGIN displayed -->
    <div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>


    Save and publish Add a color + image to a specific group at the top of posts without JavaScript 644535217

    Installing the CSS
    Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
    Code:
    * {
     Â   text-decoration: none;
    }

    .conan2000-flower [style="color:?????"] {
     Â   cursor: default;
     Â   color: #0000 !important;
     Â   display: block;
     Â   background: ?????;
    }

    .conan2000-flower,.conan2000-flower strong {
     Â   cursor: default;
     Â   color: #0000 !important;
    }
    .conan2000-flower {
     Â   background: #bcc2c7;
    }
    Replace question marks in CSS code with group color (HEX color OR color name i.e : red)


    Add a color + image to a specific group at the top of posts without JavaScript Ocia_a14

    CSS: An image of a specific group
    Code:
    .conan2000-flower [style="color:?????"] strong {
     Â   background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
    }
    Replace question marks in CSS code with group color


    Add a color + image to a specific group at the top of posts without JavaScript Admini10 Add a color + image to a specific group at the top of posts without JavaScript Helper10 Add a color + image to a specific group at the top of posts without JavaScript Top10


    _____________________________________________________________________
    banana

    skouliki, YoshiGM, SarkZKalie, TonnyKamper, poesia-verses and King Baldwing IV like this post

    YoshiGM
    YoshiGM
    Active Poster


    Male Posts : 1501
    Reputation : 144
    Language : Spanish & English
    Location : Mexico

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by YoshiGM April 11th 2024, 4:21 pm

    Hmm interesting.. We can save some loading resources using a simple template edit instead of a JS.

    Good job :p
    tikky
    tikky
    Forumember


    Posts : 897
    Reputation : 157
    Language : 🇵🇹

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by tikky April 11th 2024, 6:46 pm

    better is use the group as a reference (demo) but it's a good trick
    كونان2000
    كونان2000
    Forumember


    Male Posts : 204
    Reputation : 93
    Language : Arabic

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by ÙƒÙˆÙ†Ø§Ù†2000 April 11th 2024, 11:55 pm

    Thanks @YoshiGM and @tikky ^^

    tikky wrote:better is use the group as a reference (demo) but it's a good trick
    Oh I didn't know about it before but Glasses
    The trick is in my first post
    It is easy to modify and does not require expert programmers
    It works on all versions the same way
    lol!






    Mihai
    Mihai
    Forumember


    Male Posts : 853
    Reputation : 37
    Language : Romanian, English
    Location : Bucharest, Romania

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by Mihai April 26th 2024, 3:11 am

    كونان2000 wrote:
    Hello everyone

    With this trick, you can add a color to a specific group that appears at the top of posts
    and You can also add photos to a specific group,

    I know it's a common trick, but it was using JavaScript

    Now you don't need to use JavaScript-jQuery

    A trick I discovered that I wanted to share with you Bingo

    Add a color + image to a specific group at the top of posts without JavaScript Ocia_a12
    ----------------------------------------------




    phpBB2:



    All versions
    -------------

    Find the next part in viewtopic_body template
    Code:
    <!-- BEGIN displayed -->

    replace it with
    Code:
     
    <!-- BEGIN displayed -->
    <div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>


    Save and publish Add a color + image to a specific group at the top of posts without JavaScript 644535217

    Installing the CSS
    Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
    Code:
    * {
     Â   text-decoration: none;
    }

    .conan2000-flower [style="color:?????"] {
     Â   cursor: default;
     Â   color: #0000 !important;
     Â   display: block;
     Â   background: ?????;
    }

    .conan2000-flower,.conan2000-flower strong {
     Â   cursor: default;
     Â   color: #0000 !important;
    }
    .conan2000-flower {
     Â   background: #bcc2c7;
    }
    Replace question marks in CSS code with group color (HEX color OR color name i.e : red)


    Add a color + image to a specific group at the top of posts without JavaScript Ocia_a14

    CSS: An image of a specific group
    Code:
    .conan2000-flower [style="color:?????"] strong {
     Â   background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
    }
    Replace question marks in CSS code with group color


    Add a color + image to a specific group at the top of posts without JavaScript Admini10 Add a color + image to a specific group at the top of posts without JavaScript Helper10 Add a color + image to a specific group at the top of posts without JavaScript Top10


    _____________________________________________________________________
    banana

    Hello,

    my suggestion is to make that color for each group for ModernBB and AwesomeBB for the header, where the title is included for the topic creations - and when someone replys (from the staff ofc, to show the color also... and so on!) - and for members to show default color...

    كونان2000 likes this post

    كونان2000
    كونان2000
    Forumember


    Male Posts : 204
    Reputation : 93
    Language : Arabic

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by ÙƒÙˆÙ†Ø§Ù†2000 April 27th 2024, 1:01 am

    hi @Mihai
    ok Dawa
    : AwesomeBB:

    TonnyKamper likes this post

    Mihai
    Mihai
    Forumember


    Male Posts : 853
    Reputation : 37
    Language : Romanian, English
    Location : Bucharest, Romania

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by Mihai April 27th 2024, 3:15 am

    كونان2000 wrote:hi @Mihai
    ok Dawa
    : AwesomeBB:
    can you send an screenshot please? Also the tag </span-div> is totally wrong!
    كونان2000
    كونان2000
    Forumember


    Male Posts : 204
    Reputation : 93
    Language : Arabic

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by ÙƒÙˆÙ†Ø§Ù†2000 April 27th 2024, 4:37 am

    Beyonder
    Beyonder
    Forumember


    Male Posts : 723
    Reputation : 29
    Language : English
    Location : Beyond Realm

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by Beyonder April 29th 2024, 10:45 am

    Interesting!
    كونان2000
    كونان2000
    Forumember


    Male Posts : 204
    Reputation : 93
    Language : Arabic

    Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

    Post by ÙƒÙˆÙ†Ø§Ù†2000 April 30th 2024, 1:06 am

    Thanks @Beyonder ^^

      Current date/time is May 8th 2024, 10:02 pm