Free Forever. Our themes will always be free. Forever. Period.

Replace Stats Bar Image with CSS

Mick in Tutorials
Apr 27, 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:


Tagged with: smf stats tut css 


Mick

Mick G

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 and has a weakness for Tacos and Pizza.

Website: https://www.idesignsmf.com/

    

0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement