Thanks Laurence, just what I

RockSoup — Thu, 03 Jul 2008 16:16:54 -0700

Thanks Laurence, just what I needed.

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

Is there a class for

Chad — Tue, 20 May 2008 14:32:14 -0700

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!

Nice stuff!

Guest — Sat, 15 Mar 2008 13:06:49 -0700

Nice stuff!

There is a bug with this

Guest — Sat, 01 Mar 2008 20:14:31 -0700

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,

That was not supposed to say

Guest — Wed, 07 Nov 2007 11:49:58 -0700

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

What do you think about

Chad — Wed, 31 Oct 2007 15:58:19 -0700

What do you think about using

If using a node.tpl.php

Guest — Thu, 18 Oct 2007 14:45:52 -0700

Hi Chad, glad you like the

Laurence — Fri, 12 Oct 2007 04:22:52 -0700

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.

Nice! Glad to see this and

Chad C. — Thu, 11 Oct 2007 22:18:45 -0700

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!

Thanks, yes I should have

Laurence — Thu, 11 Oct 2007 06:40:03 -0700

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.

Nice trick :) Maybe you

themegarden.org — Thu, 11 Oct 2007 06:00:07 -0700

Nice trick :)

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

However, nice.

Theming Drupal's Vote Up/Down Module

Laurence — Wed, 10 Oct 2007 13:29:48 -0700

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:

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

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

My Drupal Blog - Theming Drupal's Vote Up/Down Module - Comments

Thanks Laurence, just what I

Is there a class for

Nice stuff!

There is a bug with this

That was not supposed to say

What do you think about

If using a node.tpl.php

Hi Chad, glad you like the

Nice! Glad to see this and

Thanks, yes I should have

Nice trick :) Maybe you

Theming Drupal's Vote Up/Down Module