Announcement

Collapse
No announcement yet.

How to Change Colors of User Reputation Bars using CSS

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod How to Change Colors of User Reputation Bars using CSS

    User reputation has corresponding CSS classes added by vB5. For negative reputation, it adds neg and highneg class. For the best reputation, it adds highpos class. You can use these classes to add custom style to the default orange reputation bars.
    Code:
    /* For high negative reputation */
    .b-meter.highneg .b-meter__bar--selected {
        background: red;
    }
    
    /* For negative reputation */
    .b-meter.neg .b-meter__bar--selected {
        background: orangered;
    }
    
    /* For best reputation */
    .b-meter.highpos .b-meter__bar--selected {
        background: green;
    }​
    Change background colors according to your preferences. You can also use background images or gradient background which vB5 uses by default. To create gradients, use this CSS Gradient tool.

    If you want to change the background colors of each reputation level (which has a total of 15 levels by default), you can use the reputation level phrase to customize the color like this:

    Code:
    .b-meter[title="is infamous around these parts​"] .b-meter__bar--selected {
        background: red;
    }​​​
    
    .b-meter[title="has a reputation beyond repute"] .b-meter__bar--selected {
        background: green;
    }​​
    Use the pattern in the above code on how the reputation level phrase is used to customize the rest of the reputation levels. Refer to the User Reputation Manager to see the phrase for each level.
    ​
    Enjoy!
    Last edited by glennrocksvb; 10-08-2022, 10:17 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Works perfectly! Thank you so much for this Glenn.

    Comment


      #3
      Glad to help!
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #4
        Hello Glenn, can you give me a tip why the reputation is not displayed for me?
        Updated from 5.7.2 to 5.7.3 and it's been gone ever since. But before that it worked, now I don't know in which direction to look.
        I thank you​

        Click image for larger version

Name:	image.png
Views:	108
Size:	178.0 KB
ID:	27122​

        Comment


          #5
          Maybe you have custom CSS code to hide it? Inspect the page and check if the reputation bar is in the HTML. It has b-meter class if I remember it correctly. I'm on my phone I can't verify it now.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #6
            Hello Glenn,
            thanks for your information. This css is just this.
            As I said, everything worked with the previous version, but not anymore after the update.
            Best regards​

            Click image for larger version

Name:	image.png
Views:	96
Size:	178.6 KB
ID:	27145​

            Comment


              #7
              I was referring to custom CSS in css_additional.css template. Maybe you added code there to hide the reputation bars?
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                Or the reputation is disabled in the AdminCP options? Check Settings > Options > User Reputation Options if "Show Reputation" is set to Yes.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #9
                  Hello Glenn.
                  Custom CSS in template css_additional.css is empty for me. Haven't posted anything there yet.​
                  Reputation in AdminCP options is enabled. I hadn't changed these. As I said before the update it worked.

                  Is there a way to activate this again using Custom CSS in template css_additional.css?
                  Greetings Deadpool

                  Comment


                    #10
                    Originally posted by Deadpool View Post
                    Is there a way to activate this again using Custom CSS in template css_additional.css?
                    CSS is just for styling the HTML on the page. If it's not present on the HTML, then there's nothing CSS can do.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #11
                      Hello Glenn.

                      Can you please tell me where I have to insert this and where exactly this file is located and what is it called?

                      HTML Code:
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>
                      <div class="b-meter__bar"></div>​
                      Thanks so much

                      Comment


                        #12
                        That's in conversation_userinfo template.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment

                        Users Viewing This Page

                        Collapse

                        There is 1 user viewing this forum topic.

                        • Guest Guest

                        Latest Posts

                        Collapse

                        Working...
                        X
                        Searching...Please wait.
                        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                        Please push the back button and reload the previous window.'
                        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                        Please push the back button and reload the previous window.'
                        An internal error has occurred and the module cannot be displayed.
                        There are no results that meet this criteria.
                        Search Result for "|||"