MyBB Community Forums

I have no idea why developers have done all the brainstorms placing 3 pieces of images and stretching the middle one with an additional variable. Here is the most simple way to do that:

Lets style the thread view poll area first.

First go to template:
showthread_poll_resultbit

and replace entire content with the following:

<tr>
<td class="{$optionbg}" align="right" width="400">{$option}{$votestar}</td>
<td class="{$optionbg}" width="300">
<div class="progress_bar" title="{$percent}%">
<div class="progress" style="width: {$percent}%;"></div>
</div>
</td>
<td class="{$optionbg}" width="70" align="center">{$votes}</td>
<td class="{$optionbg}" width="30" align="center">{$percent}%</td>
</tr>

Place the same content in 'polls_showresults_resultbit' template also for styling poll page.

Now add this little CSS code to your global.css

.progress_bar {
	border: 1px solid #0f5c8e;
	padding: 1px;
}

.progress {
	padding: 5px 0;
	box-sizing: border-box;
	background: #026CB1 url(images/thead_bg.gif) center repeat-x;
}

Thats it. Result:



Remember that this is the most basic approach. It can be done with the same trick using HTML Progress Tag also which will; without any additional CSS; be displayed with the default OS style:

<progress value="{$percent}" max="100"></progress>

... and can be as much advanced as the modern CSS3 animated one like this:



Happy coding

Very nice, I would of never thought of something like this.

(2014-02-11, 04:40 PM)effone Wrote: [ -> ]I have no idea why developers have done all the brainstorms placing 3 pieces of images and stretching the middle one with an additional variable. Here is the most simple way to do that:

Lets style the thread view poll area first.

First go to template:
showthread_poll_resultbit

and replace entire content with the following:

<tr>
<td class="{$optionbg}" align="right" width="400">{$option}{$votestar}</td>
<td class="{$optionbg}" width="300">
<div class="progress_bar" title="{$percent}%">
<div class="progress" style="width: {$percent}%;"></div>
</div>
</td>
<td class="{$optionbg}" width="70" align="center">{$votes}</td>
<td class="{$optionbg}" width="30" align="center">{$percent}%</td>
</tr>

Place the same content in 'polls_showresults_resultbit' template also for styling poll page.

Now add this little CSS code to your global.css

.progress_bar {
	border: 1px solid #0f5c8e;
	padding: 1px;
}

.progress {
	padding: 5px 0;
	box-sizing: border-box;
	background: #026CB1 url(images/thead_bg.gif) center repeat-x;
}

Thats it. Result:



Remember that this is the most basic approach. It can be done with the same trick using HTML Progress Tag also which will; without any additional CSS; be displayed with the default OS style:

<progress value="{$percent}" max="100"></progress>

... and can be as much advanced as the modern CSS3 animated one like this:



Happy coding

Could you make a tutorial on how to make one like this for a dark theme:



please?