Star Icons for RateIt Plugin


Published on September 7, 2005 at 12:57 PM EST
In the Tutorials category.

If you’re using the RateIt plugin from Movable Circus, you might want to add some visuals to the voting process. I created some star icons to use on danandsherree.com, then decided to create a few more color variations to share.

Included in the “star packs” are nine .gif files, depicting ratings from one to five in half-step increments, plus a “zero votes” image to show that no votes have been made. Below is a sampling of each rating from various star packs:

stars.gif

Download the star packs you like:

If you’d like to use some different colored or sized stars, you can download stars.ai, the Illustrator file I made them with and modify them yourself. If you don’t have Illustrator, leave a comment below and I’ll try my best to meet your needs.

Using the Stars

You’ll need to change your Individual Entry Archive template to use these stars rather than plain text. If you’re using the “default” RateIt tag block…

<div align="center">
<MTRateItNoVotes><b>No Votes Yet. You can be the first!</b></MTRateItNoVotes>
<MTRateItHasVotes>Avg. Rating: <MTRateItRating /> (<MTRateItVotes /> votes) </MTRateItHasVotes>
<MTRateItHasntVoted><b>| Rate It: <MTRateItVoteText seperator=" " /></b></MTRateItHasntVoted><br />
(1="Worst", 5="Best")
</div>

…replace it with the below block of code. Note that there’s some PHP code in there. (The PHP will round a rating to the nearest half star.) Be sure the path to the star image files is correct.

<div align="center">
<MTRateItNoVotes>
<p>Nobody's voted yet. Be the first!</p>
<img src="/path/to/stars/stars-0.gif" title="Not rated yet!" width="171" height="28" alt="Not rated yet!" />
</MTRateItNoVotes>
<MTRateItHasVotes><?php
  $actual_value = <MTRateItRating>;
  $half_round = round(($actual_value*2), 0)/2;
  echo '<img src="/path/to/stars/stars-' . $half_round . '.gif" title="Current rating: <MTRateItRating> from <MTRateItVotes> votes" width="171" height="28" />';
?><p>Avg. Rating: <MTRateItRating /> (<MTRateItVotes /> votes)</p></MTRateItHasVotes>
<MTRateItHasntVoted><p>Rate It: <MTRateItVoteText seperator=" " /> (1="Worst", 5="Best") </p></MTRateItHasntVoted>
</div>

Rebuild, and your done. You should have a star rating system—just like the one below!