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; }
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; }
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%; }
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; }
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!
Discussion - No comments yet…8 comments
When you said "enhance" the ratings module, I thought of this.
Changing the theme is a good idea though — I had a couple of problems with people not even knowing the rate module was there, so a CSS upgrade might have helped. I'm now testing out a non-Wikidot 5 star rating instead.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Yeah, sorry about that - with the current site setup, I'm limited to a certain length for the page title, and have to think of different synonyms for customise - I'm thinking of making the theme more long-title friendly.
As for the enhanced ratings - those improvements suggested at the projects site would definitely make them more powerful.
I assume you're talking about the PollDaddy ratings. While I love their look, not being able to integrate them into the ListPages module is a big turn off - It makes it very difficult to compile a Top Rated Entries list without having both of the ratings on the one page.
BMC Creative | RoaringApps | @brycecammo
Yes, I'm using the PollDaddy ratings. I'd forgotten what the site was called.
Not being able to integrate them is a pain, I agree. That's part of the reason it's still in the 'experimental' phase after about a month and not yet being used on the whole site (just one category at the moment).
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
How about the possibility to add a thumbs-up image instead of "+" and a thumbs-down image instead of "-"? I'm thinking that you'd just be able to stick an image over the top of the +/- sections of the module?
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
This would definitely be possible, and would probably make the meaning of the ratings more obvious.
There's a couple of ways you could do it: either simply adding the image as the background over the existing background (using the multiple background support of CSS3), or by removing the existing background completely and only showing the thumbs. Both methods would require setting the colour of the text to transparent and/or setting a really large text indent.
I'll have a look at doing this soon…
BMC Creative | RoaringApps | @brycecammo
Ideally it should work on older browsers as well if I'm to use it, as this is pretty much the only wiki on Wikidot that forces people to use specific browsers :P That, and the sites that use the RedApple theme. When CSS3 is accepted by all browsers that'll change though!
Keeping that train of thought… I'm pretty sure the current version of IE doesn't accept the colour "transparent" :( That's part of the reason why I originally said that the image might need to be stuck "over the top of the +/-"; i.e. a foreground image not background?
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I'm fairly sure you can't place a background image on top of the text, but a text indent should still work to remove the "+/-" for older versions of IE.
Off-topic: I was under the impression the RedApple theme worked fine in most browsers, except IE6 (stupid IE6!!!!).
BMC Creative | RoaringApps | @brycecammo
Am going to start using this on the STE website for documentation pages! ;-)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Post preview:
Close preview