Make Poll Result Bars Multiple Colors

Just add this CSS to the end of your templates default.css

/******************** Poll Module Result Bar Colors Begin *******************/
div.pollResultStatsRow:nth-child(5n+0) {
background-color: #3498db !important;
}
div.pollResultStatsRow:nth-child(5n+1) {
background-color: #e74c3c !important;
}
div.pollResultStatsRow:nth-child(5n+2) {
background-color: #1bc5a4 !important;
}
div.pollResultStatsRow:nth-child(5n+3) {
background-color: #9b59b6 !important;
}
div.pollResultStatsRow:nth-child(5n+4) {
background-color: #e67e22 !important;
}
/******************** Poll Module Result Bar Colors End *******************/

Feel free to change the colors, or to add more.  The css to repeat should be obvious.  Change the above css to reflect how many different colors you want to cycle through.  xn is the counter where x = the number of colors you will use, and it is common to all the different child selectors.  Then increment the counter as shown above until you have the css for all the colors.

If your template does not have a default.css file, use the attached.

If it does not exist, create the folder: /templates/tmpl_YourTemplate/css, and upload default.css to that location

Excellent work!

Already implemented with positive feedback!

Thanks, your like the Grinch.. lmao

Mean and at the same time there is a hidden do good side!

All joking aside, one GREAT improvement!

Here's css that sequences through 11 colors. Bars also have a box shadow.

/******************** Poll Module Result Bar Colors Begin *******************/
div.pollResultStatsRow:nth-child(11n+0) {
background-color: #e74c3c !important;
}
div.pollResultStatsRow:nth-child(11n+1) {
background-color: #e67e22 !important;
}
div.pollResultStatsRow:nth-child(11n+2) {
background-color: #f1c40f !important;
}
div.pollResultStatsRow:nth-child(11n+3) {
background-color: #2ecc71 !important;
}
div.pollResultStatsRow:nth-child(11n+4) {
background-color: #3498db !important;
}
div.pollResultStatsRow:nth-child(11n+5) {
background-color: #9b59b6 !important;
}
div.pollResultStatsRow:nth-child(11n+6) {
background-color: #c0392b !important;
}
div.pollResultStatsRow:nth-child(11n+7) {
background-color: #d35400 !important;
}
div.pollResultStatsRow:nth-child(11n+8) {
background-color: #2980b9 !important;
}
div.pollResultStatsRow:nth-child(11n+9) {
background-color: #27ae60 !important;
}
div.pollResultStatsRow:nth-child(11n+10) {
background-color: #7f8c8d !important;
}
div.pollResultStatsRow {
-webkit-box-shadow: 5px 5px 6px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 6px 1px rgba(0,0,0,0.75);
box-shadow: 5px 5px 6px 1px rgba(0,0,0,0.75);
}
div.poll_block div.pollAnswerBlock, div.poll_block div.pollAnswerBlockView {
    background-color: #ecf0f1 !important;
}
/******************** Poll Module Result Bar Colors End *******************/

Before

After

Much appreciated, thank you!

very nice, thanks!

nice!!

Thanks :) indeed very nice work :)

Thanks works like a charm

Hi i am using 7.3.5 it isnt showing the box shadow for me. any thoughts on why? i am using chrome browser.

I just tried it with Chrome and it worked fine. The 1st and third item are the same colour though.

If you use a darker background, the box shadow is lost. As such, I'm not using it on a black background.

I'm using the uni theme. (Light theme) I'm wondering why that's items show for other sites such as yours but not myself.

Even on chrome mobile it doesn't show the box shadow

I have it working somehow lol even added a little extra too it

/******************** Poll Module Result Bar Colors Begin *******************/

div.pollResultStatsRow:nth-child(11n+0) {

background-color: #e74c3c !important;

}

div.pollResultStatsRow:nth-child(11n+1) {

background-color: #e67e22 !important;

}

div.pollResultStatsRow:nth-child(11n+2) {

background-color: #f1c40f !important;

}

div.pollResultStatsRow:nth-child(11n+3) {

background-color: #2ecc71 !important;

}

div.pollResultStatsRow:nth-child(11n+4) {

background-color: #3498db !important;

}

div.pollResultStatsRow:nth-child(11n+5) {

background-color: #9b59b6 !important;

}

div.pollResultStatsRow:nth-child(11n+6) {

background-color: #c0392b !important;

}

div.pollResultStatsRow:nth-child(11n+7) {

background-color: #d35400 !important;

}

div.pollResultStatsRow:nth-child(11n+8) {

background-color: #2980b9 !important;

}

div.pollResultStatsRow:nth-child(11n+9) {

background-color: #27ae60 !important;

}

div.pollResultStatsRow:nth-child(11n+10) {

background-color: #7f8c8d !important;

}

div.pollResultStatsRow {

    border-radius: 25px;

-webkit-box-shadow: 5px 5px 6px 1px rgba(0,0,0,0.75), inset 0 0 10px #000000;

-moz-box-shadow: 5px 5px 6px 1px rgba(0,0,0,0.75), inset 0 0 10px #000000;

box-shadow: 5px 5px 6px 1px rgba(0,0,0,0.75), inset 0 0 10px #000000; 

}

div.poll_block div.pollAnswerBlock, div.poll_block div.pollAnswerBlockView {

    background-color: #ecf0f1 !important;

}

/******************** Poll Module Result Bar Colors End *******************/

https://gyazo.com/9dab75ae5a715a84a7286554219788f3

Well done. I'm using Modzzz  Polls. I'll see if I can enhance that module.

yeah i plan on getting all of modzzz's mods between now and our due date (september 7) ugh. alot of money lol im sure hed appreciate it lol and then ill end up modzzzifying them (see what i did there?) for personal use* 

Anywho. let me know how that goes with modifying those polls and such. maybe we can pass some ideas back and forth in private john. :P ill be messaging you soon lol