The Arcive of Official vBulletin Modifications Site.

Nicer poll bars - css · **Released**: 12-04-2013

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.

Code:

.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5, .pollbar6  {
     top: 4px;
	  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(218, 107, 19) 0%, rgb(253, 125, 22) 20px) repeat scroll 0% 0% transparent !important;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(218, 107, 19)), color-stop(20px, rgb(253, 125, 22))) !important;
	background: -webkit-linear-gradient(top, rgb(218, 107, 19) 0%, rgb(253, 125, 22) 20px) !important;
	background: -o-linear-gradient(top, rgb(218, 107, 19) 0%, rgb(253, 125, 22) 20px) !important;
	background: -ms-linear-gradient(top, rgb(218, 107, 19) 0%, rgb(253, 125, 22) 20px) !important;
	background: linear-gradient(top, rgb(218, 107, 19) 0%, rgb(253, 125, 22) 20px) !important;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#da6b13', endColorstr='#fd7d16', GradientType=0) !important;
	position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}

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.

Code:

.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5, .pollbar6  {

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

full size
Enjoy.

Update:

Colored poll bars.

Code:

.pollbar1  {
     top: 4px;
      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 , #d3d3d3 0%, #eaeaea 20px) repeat scroll 0% 0% transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3d3d3), color-stop(20px, #eaeaea)) !important;
    background: -webkit-linear-gradient(top, #d3d3d3 0%, #eaeaea 20px) !important;
    background: -o-linear-gradient(top, #d3d3d3 0%, #eaeaea 20px) !important;
    background: -ms-linear-gradient(top, #d3d3d3 0%, #eaeaea 20px) !important;
    background: linear-gradient(top, #d3d3d3 0%, #eaeaea 20px) !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#eaeaea', GradientType=0) !important;
    position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}
.pollbar2  {
     top: 4px;
      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 , #0e0eff 0%, #3535ff 20px) repeat scroll 0% 0% transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0e0eff), color-stop(20px, #3535ff)) !important;
    background: -webkit-linear-gradient(top, #0e0eff 0%, #3535ff 20px) !important;
    background: -o-linear-gradient(top, #0e0eff 0%, #3535ff 20px) !important;
    background: -ms-linear-gradient(top, #0e0eff 0%, #3535ff 20px) !important;
    background: linear-gradient(top, #0e0eff 0%, #3535ff 20px) !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0e0eff', endColorstr='#3535ff', GradientType=0) !important;
    position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}
.pollbar3  {
     top: 4px;
      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 , #318000 0%, #40a600 20px) repeat scroll 0% 0% transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #318000), color-stop(20px, #40a600)) !important;
    background: -webkit-linear-gradient(top, #318000 0%, #40a600 20px) !important;
    background: -o-linear-gradient(top, #318000 0%, #40a600 20px) !important;
    background: -ms-linear-gradient(top, #0e0eff 0%, #40a600 20px) !important;
    background: linear-gradient(top, #318000 0%, #40a600 20px) !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#318000', endColorstr='#40a600', GradientType=0) !important;
    position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}
.pollbar4  {
     top: 4px;
      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 , #d80030 0%, #ff0039 20px) repeat scroll 0% 0% transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d80030), color-stop(20px, #ff0039)) !important;
    background: -webkit-linear-gradient(top, #d80030 0%, #ff0039 20px) !important;
    background: -o-linear-gradient(top, #d80030 0%, #ff0039 20px) !important;
    background: -ms-linear-gradient(top, #d80030 0%, #ff0039 20px) !important;
    background: linear-gradient(top, #d80030 0%, #ff0039 20px) !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d80030', endColorstr='#ff0039', GradientType=0) !important;
    position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}
.pollbar5  {
     top: 4px;
      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(17, 119, 209) 0%, rgb(9, 88, 156) 20px) repeat scroll 0% 0% transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(17, 119, 209)), color-stop(20px, rgb(9, 88, 156))) !important;
    background: -webkit-linear-gradient(top, rgb(17, 119, 209) 0%, rgb(9, 88, 156) 20px) !important;
    background: -o-linear-gradient(top, rgb(17, 119, 209) 0%, rgb(9, 88, 156) 20px) !important;
    background: -ms-linear-gradient(top, rgb(17, 119, 209) 0%, rgb(9, 88, 156) 20px) !important;
    background: linear-gradient(top, rgb(17, 119, 209) 0%, rgb(9, 88, 156) 20px) !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#da6b13', endColorstr='#09589c', GradientType=0) !important;
    position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}
.pollbar6  {
     top: 4px;
      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 , #970880 0%, #bd26a4 20px) repeat scroll 0% 0% transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #970880), color-stop(20px, #bd26a4)) !important;
    background: -webkit-linear-gradient(top, #970880 0%, #bd26a4 20px) !important;
    background: -o-linear-gradient(top, #970880 0%, #bd26a4 20px) !important;
    background: -ms-linear-gradient(top, #970880 0%, #bd26a4 20px) !important;
    background: linear-gradient(top, #970880 0%, #bd26a4 20px) !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#970880', endColorstr='#bd26a4', GradientType=0) !important;
    position: relative;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}

Davey-UK · #2 12-05-2013, 03:50 PM

Do you have a screen shot of what to expect with this edit?
Ta

billstelling · #3 12-05-2013, 04:00 PM

added.. I missed it when I wrote it up. I added it while you were posting..

ckgb · #4 12-14-2013, 09:11 AM

How did you get the number of votes to display in the same orange?

Thanks

billstelling · #5 12-15-2013, 10:12 PM

poll #'s

Code:

#pollresults li .votes .numvotes {
    font-size: 11px;
    color: #fd7d16;
}

poll %

Code:

#pollresults li .votes {
    font-size: 11px;
    color: #0d0d0d;
}

ckgb · #6 12-15-2013, 11:24 PM

Thank you very much

billstelling · #7 12-19-2013, 05:43 AM

your welcome..

ckgb · #8 02-11-2014, 07:29 AM

Polls having 0 votes display semitransparent looking tiny bars. Where is the option to change color of he "zero vote" bars?

Thank you.

billstelling · #9 04-16-2014, 01:09 AM

in this part of the code..

Code:

    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}

ku-med · #10 01-09-2015, 01:54 PM

Looks cool! Thanks.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05307 seconds Memory Usage 2,323KB Queries Executed 24 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (6)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (10)post_thanks_box (1)post_thanks_box_bit (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (10)post_thanks_postbit_info (9)postbit (2)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

Благодарность от:
nolimitreef

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!