[Drupal] How to create a Custom Star Widget for Five Star Rating in Drupal 7

Fivestar module is a simple module that adds a "rating star" widget to the nodes. This module displays number of stars that you set; a click from a reader rates the page with that number. We can create custom widgets for changing the color of stars or for showing any other images instead of stars. For example, we can use symbols like a diamond, banana, flower etc.

The following Steps Describe how to Create a Widget for a Star Rating.

1. Download Fivestar module from Drupal.org. Inside the five-star module, you can find the folder named 'widgets'. Also, you will see 'flames' folder, one of the included widget. We can create a new widget by copying that folder


2. Make a copy of the 'flames' folder. Rename it to a descriptive name for the stars you'll make: for example 'leaf'. So the directory structure will be like fivestar->widgets->leaf.
3. In an image editor, create an image with 16x48 pixels
4. Create 3-star icons each of 16x16 pixels and place it vertically into the image created in the previous step. ie. to the 16x48 graphics. Top image is for showing not rated stars (usually a pale color is chosen), the middle image is to show the rated stars (a colorful image is better), and the bottom image is the image that is to be shown on mouse-over (not so pale and not so colorful). You can look at the images at default folder or flames folder for examples.
5. Delete the images flame.png and delete.png from the folder and place the created image with any name as of your choice. example leaf.png
6. Create two 16x16 pixels cancel images and align them vertically in an 16x32 pixel image. Same as we did in the previous step. The top image is the default image. The bottom image is the mouse-over image. Name the image as delete.png and save it in the same 'leaf' folder
7. Edit the .css files in the folder. Change every instance of "flame.png" to the name of your 'star' image file ("leaf.png" in my case).
8. Change the name of the .css file to the widget name (if needed)
9. The widget is ready now. In five-star administration page 'admin/config/content/reviews' you could see your new widget among the star widget options in Rating field fieldset.

Hope you find this article useful. Also, if any queries please feel free to get in touch with us.