Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trendri
    replied
    this is really nice

    Leave a comment:


  • Glenn Vergara
    replied
    Reputation system is based on number of Likes. The more number of likes, the more colored reputation meter bars show up.

    Leave a comment:


  • Nt_loader
    replied
    How do you get the meter under the user name to show up?

    Leave a comment:


  • TLMD
    replied
    Nice addition to the tutorials channel. Thanks for sharing!

    Leave a comment:


  • 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 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_desc.png
Views:	84
Size:	69.0 KB
ID:	4210857



    Live demo at:
    http://forum.pfadfinder-biedermannsd...lga-diskussion
    Last edited by Glenn Vergara; Mon 24th Nov '14, 1:26pm.

Related Topics

Collapse

Working...
X