Custom stars in Fivestar

I had a bit of trouble with using customs stars using the Fivestar module in Drupal 7 (I seem to remember Drupal 5 being more straightforward in this respect).

My first attempt ended with it not quite working. In the end, I just replaced some of the default star images with my custom stars in the module folder, and have been doing fine with that (remembering to re-upload my stars every time I update the module). Hacky: yes; time-consuming and frustrating: not so much.

It seems that it was a CSS issue in the end (thx GrahamO). It seems I was using “background-image” when I should have been using “background”.

Here is the full recipe for my future reference when I have time to implement it.

1) Created a folder for my helper module called, for example, ‘my_stars’.

2) Made the stars & cancel image files, following the process outlined here:
https://drupal.org/node/234391
That was simple enough. I wanted mine to be a bit bigger, so I went for 40x120px for the stars and 40x80px the cancel image (which affects the CSS in (5) below). That gave me a ‘my_stars.png’ and ‘cancel.png’ file which I put in the ‘my_stars’ module file above.

3) Created a my_stars.info file with the following contents:

name = My Stars
description = Adds custom stars to Fivestar
core = 7.x
dependencies = fivestar

4) Then created a my_stars.module file with the following:

<?php
function my_stars_fivestar_widgets() {
// Letting Fivestar know about my custom stars.
$widgets = array(
drupal_get_path('module', 'my_stars') . '/my_stars.css' => 'my_stars',
);
return $widgets;
}
?>

5) Next was the CSS, based on the minimal widget that comes with Fivestar, named ‘my_stars.css’:

/* Static View-only Star Version */
.fivestar-my_stars div.fivestar-widget-static .star {
width: 40px;
height: 40px;
background: url(my_stars.png) no-repeat 0 0;
}
.fivestar-my_stars div.fivestar-widget-static .star span.on {
background: url(my_stars.png) no-repeat 0 -80px;
}
.fivestar-my_stars div.fivestar-widget-static .star span.off {
background: url(my_stars.png) no-repeat 0 0;
}

/* Javascript Star Version */
.fivestar-my_stars div.fivestar-widget .cancel,
.fivestar-my_stars div.fivestar-widget .star {
width: 40px;
height: 40px;
}
.fivestar-my_stars div.fivestar-widget .cancel,
.fivestar-my_stars div.fivestar-widget .cancel a {
background: url(cancel.png) no-repeat 0 0;
}
.fivestar-my_stars div.fivestar-widget .star,
.fivestar-my_stars div.fivestar-widget .star a {
background: url(my_stars.png) no-repeat 0 0;
}
.fivestar-my_stars div.fivestar-widget div.on a {
background-position: 0 -40px;
}
.fivestar-my_stars div.fivestar-widget div.hover a,
.fivestar-my_stars div.rating div a:hover {
background-position: 0 -80px;
}

Take care to replace all instances of ‘my_stars’ with whatever you called yours (as nafmarcus pointed out), and make sure your background-position value reflects the size of your image (i.e. 1/3 and 2/3 of the total image height).

6) Upload the ‘my_stars’ module folder, containing the two image files, the CSS file the .info file and the .module file to sites/all/modules and then you will find module in the “Other” section. Switch it on as usual and under the ‘Manage Display’ tab of whatever content type you are using Fivestar on click the cog on the right of the fivestar field. You should then be able to choose your custom stars under the ‘Star display options’.

That’s it. If I understand correctly, this means that I can update Fivestar without losing my custom stars. I’ll update when I have tried it out.

No comments yet.

Leave a Reply