Announcement

Collapse
No announcement yet.

How to display Reputation description below the Reputation bars using pure CSS

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

    Free Mod How to display Reputation description below the Reputation bars using pure CSS

    By default, reputation description only appears on hover of the reputation bars in the postbit section in a thread. This has accessibility problem on touch devices as they don't have hover state. Displaying the reputation description gives a quick overview of the user's reputation without the need to hover over the reputation bars.

    This can be done using pure CSS. No template hooks required. Just add this custom CSS in css_additional.css template or via Sitebuilder > Style > CSS Editor for each of the styles/themes and you're done!


    Code:
    .b-meter:after {
        content: attr(title);
        position: relative;
        top: 0;
        left: 0;
        white-space: pre-wrap;
        margin: 0 -8px;
        display: block;
    }
    .l-small .b-meter:after {
        margin: 0;
    }
    .b-meter__bar {
        margin-left: -2px;
        display: inline-block;
        float: none;
    }
    See sample screenshot below:
    Click image for larger version

Name:	reputation.png
Views:	1643
Size:	26.5 KB
ID:	102

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

    #2
    Can i delete my own posts? (I'm so stupid... i found my problem.... i'm a stupid stupid human. Try to set notes in CSS wit "//" instead of "/**/")

    Comment


      #3
      is there a way to do this but if people have reputation disabled it won't show? I like this idea but it just shows 'has reputation disabled' and I'd like to be able to get rid of that and the bars if they have reputation disabled

      is that a possibility in just pure CSS?

      Comment


      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Can you post or PM a link to that particular topic on your site? Can guests see it?

      • pgreenway
        pgreenway commented
        Editing a comment
        Guests can see it. I haven’t put in any code to block guests from seeing anything in the postbit. Thanks Glenn

        Dirtburglars.com/board

      #4
      Click image for larger version

Name:	DE6B9BDE-B156-455B-B808-BF7C2D8EF1FC.png
Views:	181
Size:	316.0 KB
ID:	10547

      Comment


        #5
        Add this:

        Code:
        .b-meter[title="has disabled reputation"] {
            display: none;
        }
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #6
          Glenn, as always much appreciated. Coffee's on me today, cheers!

          Comment


            #7
            November 22, 2019, and still works like a charm. I am using the cloud version 5.5.5 and I copied and pasted the code into the style css code box.

            Comment


              #8
              working great on 5.6.3, thank you

              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 "|||"