Enhance the ratings module

Enhance the ratings module

Make the ratings module actually look good with this quick and easy fix.

The default ratings module, widely used across wikidot sites, is far from attractive and tends to blend into the page, making it difficult to spot and reducing the number of visitors that rate the page. Unfortunately, it is something that is rarely altered in custom themes, meaning you’re left with the default configuration. But never mind, because we’re here with a solution. Below we’ll run you through the alterations you need to make to customise the ratings box and make it stand out from the page, hopefully increasing the number of visitors that feel compelled to click the little + button.

The Markup

For those of you that don’t know how to implement the ratings on the site - here’s a quick guide. First, in your Site Manager (yoursite.wikidot.com/admin:manage), click the Page Ratings link in the left sidebar and enable page ratings for the categories you want to allow people to rate. Then, on each page you want the ratings module, just add the following code:

[[module Rate]]

Remember, that if you want to add the ratings module to an entire category, just add it to the live template (category:_template) - it’s much quicker.

The CSS

Okay, now for the cool part - let’s customise this baby and make it look good.

There are four selectors we need to alter (the rating: ? part, and plus, minus & cancel buttons). Luckily, we can change them all with the same bit of code. First, we’ll lay the groundwork by defining the height, padding, and a border radius to round off the corners.

.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup a, 
.page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    height: 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 0px 5px 2px 5px;
}
ratings-0.5.png

Next, we’ll give them a background using a transparent png with angled stripes, and a 1p x border. You can change the background-color to suit the theme of your site.

.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup a, 
.page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    background-color: #3198dd;
    background-image: url(http://bmcenterprises.wdfiles.com/local--files/css:img/button-shade.png);
    background-position: center bottom;
}
ratings-1.png

To finish it off, we’ll fix up the colour of the links, centre the text and put a slight gap between the buttons with a 2p x margin. If you’d like the ratings module to be bigger, simply increase the font-size and the background will resize itself.

.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup a, 
.page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    color: white;
    text-align: center;
    margin-right: 2px;
    font-size: 100%;
}
ratings-2.png

Finally, to add another dimension, we’ll change the background and border colours when the buttons are hovered over.

.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, 
.page-rate-widget-box .cancel a:hover {
    background-color: #aaa;
    border: 1px solid #aaa;
}
ratings-3.png

One last note. If you would like to remove the option for users to cancel their vote, simply set the cancel button to display none using the following code:

.page-rate-widget-box .cancel {
    display: none;
}

So there you have it - a new ratings module that not only looks good, but will entice visitors to rate your site.

Enjoy the article? Tweet it!

tags — ratings

Discussion - No comments yet…8 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.