Better CSS Pollbar
#1
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:

[Image: Q7RXFca.png]

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>

[Image: 2aejyUg.png]

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

[Image: F7aXjej.png]

Happy coding Big Grin
Reply
#2
Very nice, I would of never thought of something like this.
Reply
#3
(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:

[Image: Q7RXFca.png]

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>

[Image: 2aejyUg.png]

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

[Image: F7aXjej.png]

Happy coding Big Grin

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

[Image: F7aXjej.png]

please?
[Image: logo.png]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)