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).

If you’re building more than a couple of Drupal themes it can be very beneficial to create a base style.css file first.

In short, this is a stylesheet which acts as a starting point when creating a new theme, and contains all the things you’ll need to style. Organizing, and even indexing, this base style.css file will allow for maximum efficiency when building, and by creating a comprehensive base style.css file you can also save yourself the worry about whether or not you’ve left anything out!

The following is a list of most things which need styling if, for example, you wanted to cover all of the core modules:

• admin
• aggregator
• blockquote
• book
• breadcrumb
• code
• comments
• footer
• forms
• forms - admin tables
• forms - search
• forms - user-login-form
• forum
• general
• header
• layout
• links
• lists
• messages
• mission
• node
• pager
• poll
• pre
• primary links
• progress bar
• secondary links
• sidebar
• tables
• tabs