Nicer poll bars - css

[Admin]

I miss adding the images for the poll bars we had before. Even then it was a pain to code in and you had to up graphics to get the job done.

I put together a little coding to make it really simple to do and only takes about a minute to do.


To use this mod, add this code to additional css.

.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5, .pollbar6  {
     [COLOR="Blue"]top: 4px[/COLOR];
	  border-radius: 3px 3px 3px 3px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: transparent !important;
    background: -moz-linear-gradient(center top , rgb([COLOR="Red"]218, 107, 19[/COLOR]) 0%, rgb([COLOR="Red"]253, 125, 22[/COLOR]) 20px) repeat scroll 0% 0% transparent !important;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb([COLOR="Red"]218, 107, 19[/COLOR])), color-stop(20px, rgb([COLOR="Red"]253, 125, 22[/COLOR]))) !important;
	background: -webkit-linear-gradient(top, rgb([COLOR="Red"]218, 107, 19[/COLOR]) 0%, rgb([COLOR="Red"]253, 125, 22[/COLOR]) 20px) !important;
	background: -o-linear-gradient(top, rgb([COLOR="Red"]218, 107, 19[/COLOR]) 0%, rgb([COLOR="Red"]253, 125, 22[/COLOR]) 20px) !important;
	background: -ms-linear-gradient(top, rgb([COLOR="Red"]218, 107, 19[/COLOR]) 0%, rgb([COLOR="Red"]253, 125, 22[/COLOR]) 20px) !important;
	background: linear-gradient(top, rgb([COLOR="Red"]218, 107, 19[/COLOR]) 0%, rgb([COLOR="Red"]253, 125, 22[/COLOR]) 20px) !important;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='[COLOR="Red"]#da6b13[/COLOR]', endColorstr='[COLOR="Red"]#fd7d16[/COLOR]', GradientType=0) !important;
	position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, [COLOR="DarkOrange"]0.25[/COLOR]);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, [COLOR="DarkOrange"]0.25[/COLOR]);
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, [COLOR="DarkOrange"]0.25[/COLOR]);
}

Go to the stylvars for the theme, click the go button on the right and then check the box that says "Hide Variables". Pick "polls' in the list and set the "Poll Bar Height" to what you want, I used 6px and set "Poll Bar Margin" to 0.4em. Set the colors for the poll bars to the start color you set for the gradient if you changed it. I used #fd7d16.

You can set the colors for the gradient by adjusting the red code.

You can set the level of shadow by adjusting the dark orange code.

The blue is to bring them down and centered with the text for the poll item.

If you want a different one for each bar, use the same code, change to the colors you want, and remove the extra descriptors.

.pollbar1[COLOR="YellowGreen"], .pollbar2, .pollbar3, .pollbar4, .pollbar5, .pollbar6[/COLOR]  {

With each one just change pollbar1 to the number for that bar.