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.

 

 

pollsHome.png · 50.6K · 467 views
My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 20 Oct 2015

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

default.css · 620B · 147 downloads
My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 20 Oct 2015

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!

ManOfTeal.COM an OpenRCT2 Gaming Community
Quote · 20 Oct 2015

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

StdPoll.png · 22.2K · 421 views
ColorPoll.png · 36.2K · 407 views
My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 21 Oct 2015

Much appreciated, thank you!

7.3.5 with responsive UNI
Quote · 21 Oct 2015

very nice, thanks!

http://www.boonex.com/market/posts/paansystems - your resource for Dolphin Pro
Quote · 21 Oct 2015

nice!!

Always remember that the future comes one day at a time.
Quote · 21 Oct 2015

Thanks :) indeed very nice work :)

Proud Hosted by Zarconia.net
Quote · 21 Oct 2015

Thanks works like a charm

Quote · 9 Apr 2017

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

Quote · 9 May 2018

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.

Quote · 9 May 2018

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.

Quote · 9 May 2018

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

Quote · 9 May 2018

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

Quote · 12 May 2018

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

Quote · 12 May 2018

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

Quote · 15 May 2018