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.
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:
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!
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; }β
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; }ββ
β
Enjoy!
Comment