When using static display on a node page, after votes are cast, the fivestar display uses the "hover" color to fill the stars rather than the "on" color. This is true of both custom color stars and the fixed color stars.

CommentFileSizeAuthor
example.jpg4.23 KBjtolj

Comments

quicksketch’s picture

quicksketch
he/him
commented

This is intentional, so that you can tell the difference between stars that are clickable and stars that are not. If you want both to look the same, you can override the CSS so that the static widget adjusts the background image to use the "on" color.

jtolj’s picture

jtolj commented
Status: Active » Closed (fixed)

Okay, fair enough... thanks for the tip.

For anyone else who is interested in changing this behavior, you just need to modify the css in modules/fivestar/widgets/

/ so that the background-position for div.fivestar-widget-static .star span.on {} matches div.fivestar-widget div.on a {} For example, I'm using the "small" style... so I modified small.css as follows: div.fivestar-widget-static .star span.on { background: url(small_star.png) no-repeat 0 -32px; background-position: 0 -16px; }
jazzdrive3’s picture

jazzdrive3 commented

This is just what I was looking for. However, how would you do this when using custom colors with the oxygen widget? I can't figure it out. Every class uses the same .png and position.

Thanks!