I am trying to make Fivestar use two sets of stars for displaying the ratings on a node. For instance, on the homepage the stars should be much larger in size (around 32 x 32 for each star) and on the node page it should be the default size already used in fivestar.

I've been trying to find a way to hack this to no avail but am hoping that this might be a feature or perhaps some directions on how to do this could be added to the documentation.

Thanks so much - it rawks!

Comments

quicksketch’s picture

quicksketch
he/him
commented

CSS is your savior here. You just need to over-ride the CSS for fivestar within the specific context of your front page. Add something like this to your style.css and create a new larger star called 'stars-large.png' and place it in your theme's images directory.

.front div.fivestar-widget .star,
.front div.fivestar-widget .star a,
.front div.fivestar-widget-static .star,
.front div.fivestar-widget-static .star span.on,
.front div.fivestar-widget-static .star span.off {
  width: 32px;
  height: 32px;
  background-image: url(images/stars-large.png);
}
div.fivestar-widget div.on a {
  background-position: left -32px;
}
div.fivestar-widget div.hover a, div.rating div a:hover {
  background-position: left -64px;
}
graphicdefine’s picture

graphicdefine commented
Status: Active » Closed (fixed)

nice! Thanks so much!

JohnnyW’s picture

JohnnyW commented

Awesome -- Thanks!