5-star ratings for Wikidot - Available now!

One of the highest rated wishes on the Wikidot feedback system was for the implementation of a 5-star rating system, which currently has 28 votes.

The Wikidot team has been hard at work and as of today, it has been implemented! You can try it out right now.

Appearance

The 5-star module looks reasonably generic, but that's a good thing - it'll fit in well with almost any existing website's theme on Wikidot:

I'll provide steps on how to customise the module's appearance below.

How to Use 5-Star Ratings on Wikidot

The first step is to add the rating module syntax to one or more of your pages. A live template (_template) is probably a good place to start. The syntax remains unchanged:

[[module Rate]]

Once you save the page, you'll still have the older +/- rating module showing up. The next step is to change that.

Head to your Site Manager (admin:manage) and look for the Page Ratings option.

This table still appears visually similar to how it was previously, but if you were to look more closely at the Type column you'll notice that there is a new option available: stars.

Select this option, refresh the page with the Rate module on it, and you're ready to go!

Customise the Rating Module's Appearance

As demonstrated above, this is how the module looks by default:

It's not too exciting. With a bit of CSS we can adjust this to suit our theme a little better, or just make it look unique (once every site starts to use this, you'll want yours to stand out from the crowd).

The HTML generated by Wikidot for the 5-star module looks like this:

<div class="page-rate-widget-start" data-rating="0" style="cursor: pointer; width: 100px;">
    <img src="common--images/jquery-raty/star-off.png" alt="1" title="bad">
    <img src="common--images/jquery-raty/star-off.png" alt="2" title="poor">
    <img src="common--images/jquery-raty/star-off.png" alt="3" title="regular">
    <img src="common--images/jquery-raty/star-off.png" alt="4" title="good">
    <img src="common--images/jquery-raty/star-off.png" alt="5" title="gorgeous">
    <input type="hidden" name="score">
</div>

As you hover over the stars, those images change from star-off.png to star-on.png. If you disable images entirely, the alt tag will be used and you'll see numbers instead.

Example 1: Bigger is Better

If you'd just like to make the stars larger, you'll have to do two things: Firstly, increase the width of the images. Secondly, widen the div surrounding the images so that they don't wrap onto the following line. This can be achieved with the following CSS:

/* Increase image width from 16px to 20px */
.page-rate-widget-start img {
    width: 20px;
}
 
/* Compensate by increasing div width from 100px to 115px */
.page-rate-widget-start {
    width: 115px;
}

Example 2: Using the :hover psuedo-class

It would be a bit pointless, but we could also place a border around whatever image the user is currently hovering over. Or change any number of other things, using the :hover pseudo-class:

/* Place a red border around the currently-selected star (because we can!) */
.page-rate-widget-start img:hover {
    border: 1px solid red;
}

That will result in something like this:

Documentation

If you are looking for the official documentation for this Wikidot module, you can find that here.

Using This Code

All CSS code samples provided here are free to use. Attribution is not required, but it would be awesome if you did!

Post a comment with a screenshot or link to your website where you are using a customised Wikidot 5-star rating module. I'd like to see what you do with it ;-)

In fact, this blog is now using the new 5-star rating module! Please rate this post based on how useful you feel it was for you.