Drupal Fivestar is an excellent voting widget made available exclusively for Drupal usage. The Drupal Fivestar Module is compatible with Drupal versions 5 and above. With Drupal 5, you can create voting widget for nodes; with Drupal 6, you can create voting widget and also add comments but with Drupal 7 you can create the voting widget with any entity. Nate Haug and Jeff Eaton take the credit for designing the Fivestar Module.

Features of Drupal Fivestar

Some of the popular features of the Drupal Fivestar Module are detailed below:

  • The Module degrades itself smoothly to HTML after turning off the JavaScript.
  • It supports all the users who are anonymous.
  • It is compatible with all the jQuery versions.
  • It supports star set configuration.
  • It protects your votes from spam in the form of bogus votes.
  • It configures each node on the basis of type
  • It integrates with the Drupal Views Module.
  • It presents a Fivestar CCK field to build nodes of customized types.
  • It provides rollover effects with jQuery and avoids reload voting with the help of AJAX.

Creating Basic Fivestar Sets

Creating Fivestar Sets is pretty easy with the Drupal Fivestar Module. The steps involved in creating a basic Fivestar set are detailed below:

  1. Create an image that complies with the default Fivestar image size of 16×48 pixels in your image editor.
  2. Manage to split your canvas into thirds by setting the guides to 16 pixels and 32 pixels.
  3. Create and place a star icon on the top, middle and bottom thirds of your image as the Fivestar module will use the top, middle and bottom images for each of the star. The top image will be “off”, the middle image will be “On” and the bottom most will be “Hover”.
  4. Save your image with a relevant name (star.png) in a new directory. Remember that the set of stars will be labelled with the name of the directory you give.
  5. Follow the same steps to create a cancel image. Set a guide at 16 pixels to split the canvas into equal halves as there are only two steps to cancel image. The top and the bottom images would be duplicated. The top image will be “Off” and the bottom will be “Hover”.
  6. Save the cancel image in the same directory created above.
  7. Finally create a CSS style sheet.

Creating Fivestar Sets with Color Enhancements

In addition to the above method to create a basic Fivestar set you can even create a Fivestar set with advanced color enhancements attached to it. This kind of a color enhanced widget would attract a wider of audience range. The steps involved for the same are discussed below:

  1. Create a basic star set as detailed in the section above with the image splitting in vertical thirds. For a color enhanced star set you can even split the image horizontally into halves. The default Fivestar image size would be 32×48 pixels with a canvas size for 16×16 stars.
  2. Manage to split the canvas by splitting the guides to 16 pixels and 32 pixels on the y-axis and on the x-axis at 16 pixels.
  3. Set the right sides of the image to “Off”, “On” and ”Hover” states as the stars would be considered as an overlay. You can even set colors for the overlay, though white and black are the widely used colors.
  4. Create the same set of stars with the “Off”, “On” and ”Hover” states on the left side of the image as well. The left side of the stars would be used as the “color mask” and they should be in complete black color.
  5. Save the image as a 24-bit .png format, mostly named as star-template.png. You should also remember to create another copy of this image, mostly in the name of basic_star.png to serve as a preview image before adding colors to it. The preview image is recommended to be of grayscale with a suggestion of the following:
    1. Off: Brightness of 80% or White
    2. On: Brightness of 50% or 70%
    3. Hover: Brightness of 40%
  6. Perform all the above mentioned steps again to create a cancel image with a 32×32 pixel for “Off” and “Hover” states. Similarly save the image in two names mostly, cancel.png and cancel-template.png.
  7. Finally create a CSS style sheet.

In short the Drupal Fivestar is a wonderful module with excellent features. The module is easy to install just like any other Drupal Module. Though the module is cool all by itself, it is better with the other Drupal Modules such as CCK, Voting API and Views Modules. GreenGeeks provides Drupal optimized web hosting services, to learn more click here.

Leave a Reply

Your email address will not be published. Required fields are marked *