Replace Stats Bar Image with CSS

by Mick in Tutorials on 27 Apr 2013


To be frank, i never liked SMF's progress bar in the Stats page. They look awful and really bad on dark themes. The solution to this is to get rid of the image from the css file and add our own colors.

Demo: idesignSMF - Statistics Center

In the css.index file find:
.statsbar div.bar
{
float: left;
background: url(../images/bar_stats.png) no-repeat;
display: block;
margin: 0 4px;
height: 16px;
}
.statsbar div.bar div
{
position: relative;
right: -4px;
padding: 0 4px 0 0;
background: url(../images/bar_stats.png) no-repeat 100%;
height: 16px;
}


...and add your colors like this, (i used #72c1ae to suit my theme)
.statsbar div.bar
{
float: left;
background: #72c1ae;
display: block;
margin: 0 4px;
height: 16px;
}
.statsbar div.bar div
{
position: relative;
right: -4px;
padding: 0 4px 0 0;
background: #72c1ae;
height: 16px;
}


This will also change the Poll progress bars

After Pic:

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
0 Comments

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.