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

[glennrocksvb]

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:

[Menderley]

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

[pgreenway]

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?

[pgreenway]

[glennrocksvb]

Add this:

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

[pgreenway]

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

[Alex Carr]

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.

[asd937]

working great on 5.6.3, thank you

[flohse]

Is this expected to work under 6.1.5?

I tried it, but no reputation string was shown.

[glennrocksvb]

Reputation bars have been replaced by stars in vB6. And they changed the HTML structure which makes it incompatible with vB6. With the new HTML, it's hard to replicate this mod in vB6 with the similar pure CSS solution.