Replace Stats Bar Image with CSS

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:




idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



0 Comments


rocket_launch

Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.