Theming Drupal's Vote Up/Down Module

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

Vote up/down before and after theming

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

Vote up/down settings

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.

Vote up/down images

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:

.vote-up-down-widget-alt .vote-points {
height: 44px;
width: 51px;
margin: 0 0 3px 0;
padding: 8px 0 0 0;
color: #736926;
font-family: Arial, Helvetica, sans-serif;
background: #fff url(images/count_bg.jpg) no-repeat;
}
.vote-up-down-widget-alt .vote-up-inact:hover {
background: url(images/diggit_hover_bg.jpg) no-repeat;
}
.vote-up-down-widget-alt span.vote-up-act, .vote-up-down-widget-alt span.vote-up-inact, .vote-up-down-widget-alt span.up-inact {
border: none;
}
.vote-up-down-widget-alt .vote-up-inact, .vote-up-down-widget-alt .up-inact, .vote-up-down-widget-alt .vote-up-act {
background: url(images/diggit_bg.jpg) no-repeat;
}
.vote-up-down-widget-alt .vote-up-act, .vote-up-down-widget-alt .vote-up-inact, .vote-up-down-widget-alt .up-inact {
width: 51px;
height: 25px;
}
.vote-up-down-widget-alt .vote-points-label {
font-size: 63%;
line-height: 100%;
color: #998d43;
}

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:

Vote up/down points stage

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:

/**
*Override vote up/down. Change 'points' to 'diggs'.
*/
function garland_vote_up_down_points($cid, $type, $nodelink = FALSE) {
  $vote_result = votingapi_get_voting_result($type, $cid, 'points', variable_get('vote_up_down_tag', 'vote'), 'sum');
  if ($nodelink) {
    if ($vote_result) {
      $output = array(
        'title' => '<span id="vote_points_'. $cid .'" class="vote-points">'. format_plural($vote_result->value, '1 digg', '@count diggs') .'</span>',
        'html' => TRUE
      );
    }
    else {
      $output = array(
        'title' => '<span id="vote_points_'. $cid .'" class="vote-points">'. t('0 diggs') .'</span>',
        'html' => TRUE
      );
    }
  }
  else {
    if ($vote_result) {
      $output = '<span id="vote_points_'. $cid .'" class="vote-points">'. format_plural($vote_result->value, '1 digg', '@count diggs') .'</span>';
    }
    else {
      $output = '<span id="vote_points_'. $cid .'" class="vote-points">'. t('0 diggs') .'</span>';
    }
  }

  return $output;
}

function garland_vote_up_down_points_alt($cid, $type) {
  $vote_result = votingapi_get_voting_result($type, $cid, 'points', variable_get('vote_up_down_tag', 'vote'), 'sum');
  if ($vote_result) {
    $output = '<div id="vote_points_'. $cid .'" class="vote-points">'. $vote_result->value;
  }
  else {
    $output = '<div id="vote_points_'. $cid .'" class="vote-points">0';
  }

  $output .= '<div class="vote-points-label">'. format_plural($vote_result->value, 'digg', 'diggs') .'</div></div>';

  return $output;
}

…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

13 comments

1
themegarden.orgOctober 11th 2007 @ 02:00PM

Nice trick :)

Maybe you could create more unique visual effect than copy of the "digg it".

However, nice.

2
LaurenceOctober 11th 2007 @ 02:40PM

Thanks,
yes I should have made clear that I'm not suggesting you should copy Digg! (not unless you enjoy threatening letters ;)
I was just using Digg as it is the most well known example of a voting button, but you can adapt the methods above to pretty much whatever design you've got going on your website.

3
Chad C.October 12th 2007 @ 06:18AM

Nice! Glad to see this and you explained it perfectly. Great addition on showing how to correctly change the "points" text.

Another idea for a tutorial that seems to clog the Drupal Forums is a cool way to display Advertisement like Adsense.

HTML Buzz would handle an adsense section like http://digg.com/about
has quite well. Custom Region? Great Tutorials!

4
LaurenceOctober 12th 2007 @ 12:22PM

Hi Chad,
glad you like the tutorial :)
I wrote a post a few months ago on creating custom regions in Drupal, which might be useful to you with regards to adsense placement.

5
GuestOctober 18th 2007 @ 10:45PM

If using a node.tpl.php file, where is the best place to put the <?php print $vote_up_down_widget ?> in the file? Thanks for all your help and tutorials!

6
ChadOctober 31st 2007 @ 11:58PM

What do you think about using

    tags for the voting widget instead of Divs? Curious because thats what most of the voting sites use.

7
GuestNovember 7th 2007 @ 07:49PM

That was not supposed to say *tags* btw, but supposed to say Un-Ordered List, UL

8
GuestMarch 2nd 2008 @ 04:14AM

There is a bug with this method, when you click over "digg it" word to cast a vote, the div is moved down, if you keep click the div is moved down again and again.. the problem is vertical alignment using the padding method, any ideas on how to solve it?

regards,

9
GuestMarch 15th 2008 @ 09:06PM

Nice stuff!

10
ChadMay 20th 2008 @ 10:32PM

Is there a class for "already voted"? Like how Digg does " Dugg" and the opacity changes.

What class would you use for this? Thanks and great blog!

11
RockSoupJuly 4th 2008 @ 12:16AM

Thanks Laurence, just what I needed.

btw, I like the author comment img at the bottom of your comments- that looks sharp

12
VB6 AdminJuly 17th 2008 @ 04:56AM

This is an amazing guide. Thank you for writing it. I am going to implement parts of it on my Visual Basic 6.0 tutorial site. You can see what I have so far at this: Using ADO and stored procedures tutorial page. I can't wait to improve it with your guide here.

13
ReubenMarch 23rd 2009 @ 05:51AM

Hey!

My website is: http://www.brightboxstudios.com/spokenthreads

My Question is: How can I take the vote up/down I currently have installed on my product nodes

ex: http://www.brightboxstudios.com/spok...ds/?q=toughguy

and move them to the browse page under each product?

browse: http://www.brightboxstudios.com/spokenthreads/?q=browse

I do not know PHP very much at all so the more details the better. Thanks!

Also if anyone knows how to create a view or page that allows me to see a total amount of votes for every product on my site in one place that would be amazing too!

Thanks!!!

-Reuben