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:

Code Select Expand

.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)

Code Select Expand

.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:

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:

Code Select Expand

.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)

Code Select Expand

.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:

How to add extra menu buttons to Nav bar

How to center images...

Latest member and forum stats combination

Add images to the menu

Sweet CSS3 buttons