No announcement yet.

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

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

    Official - Free 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!

    .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:	609
Size:	26.5 KB
ID:	102

    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 "/**/")


      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?


      • 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

      Click image for larger version

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


        Add this:

        .b-meter[title="has disabled reputation"] {
            display: none;


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


            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.


              working great on 5.6.3, thank you