My Drupal Blog

I guess quite a few people are looking to integrate some voting mechanism into their sites these days, so here's a quick guide to theming Drupal's vote up/down module Digg style. Btw, thanks to Chad C for the suggestion, and if anyone else has ideas for posts/tutorials they'd like to see on My Drupal Blog feel free to just post them in the comments or drop me an email.

For this tutorial I'll be using the vote up/down module 5.x-1.x-dev on Drupal 5.2 and the default Garland theme.

This tutorial assumes that you have already installed and enabled the other necessary voting modules – in this case the voting API module 5.x-1.5. If not, refer to the install.txt and readme.txt files packaged with the vote up/down module for further help.

The Digg button

Well, Digg is the classic voting button after all, so lets look at how you'd theme Drupal's vote up/down package to look just like the Digg button. Basically, we'll take the default Drupal look (left) and turn it into the Digg look (right).

Step 1: Setup

First thing you need to do is go into the admin vote up/down settings (Administer > Site configuration > Vote up/down).
Set the node type you want the voting widget to show up on, set the 'Vote widget style' to alternative, and then disable the 'Link display of vote points'.

Step 2: The Images

OK, second thing you're going to need are three images:

• one for the count/number of diggs background
• one for the digg it button background when inactive
• one for the digg it button background when hovered over

For the purposes of this example I'm using the images from Digg, but you can use any images you like.

Now, just save these images to your theme's 'images' folder as normal.

Step 3: style.css

Open your style.css file and add the following:

Obviously, you will need to replace the various styles for height, width, color, and image with ones that relate to your particular site.

One important thing to note is that positioning/aligning the '0 points' text vertically can be a little tricky. I have done it by:

• adding a top padding of 8px to the .vote-up-down-widget-alt .vote-points div to position the text nicely
• subtracting this amount (8px) from the actual height of my count_bg.jpg (52px) file to give the real height you need to enter in the style.css (in this case 44px).

This extra calculation is required to help the digg it button sit correctly underneath.

All being well, you should now have the following:

Step 4: template.php

OK, that's looking pretty good but we now need to override the actual vote up/down module file functions which output 'points' and change it to 'diggs', so open your theme's template.php file and add the following:

…and basically that's it.

Just remember when using the above snippet to:

• replace 'garland' with the name of your own Drupal theme folder
• replace each occurrence of 'digg' and 'diggs' with your own points name (e.g. spins, goals, boosts, votes etc.) using either the singular or plural as appropriate