My Drupal Blog

Thanks to the Zen theme there is an awesome bit of code available to Drupal themers which enables the addition of dynamic classes to your body tag based upon a number of different parameters, such as your position and status within a site, like so:

As you can imagine, this is incredibly useful for Drupal theming, as it provides a set of classes on the body which then allow a simple way to target specific areas of a theme via CSS.

I used to end up writing lots of different bits of code into a theme file to achieve this functionality, but the Zen theme does a great job of wrapping it all up in one bundle, and also nicely comments the code so that you can figure out what's happening :)

How to use the code:

Implementing the code into your own theme is a simple two step process:

• Step 1.
  Copy the main chunk of code into your template.php file
• Step 2.
  Edit your theme's page.tpl.php file to add the body classes

Step 1
The main chunk of code you will need lives in the Zen theme's ZENtemplate.php file.

I have edited it slightly to remove any Zen theme specific code (such as references to Zen theme sub-themes).

Copy all of this code (except the opening and closing php tags) and paste it into your theme's template.php file.

(Just be aware that if your theme's template.php file already contains a _phptemplate_variables() function you will need to integrate the new code with your existing code, as you cannot re-declare the same function. Unfortunately, it's difficult to give a more detailed explanation about how to do this as each situation will be different.)

By default, a number of Drupal themes (including Garland) output an RSS feed icon at the bottom of pages which generate a feed. The feed icon is generated because of the existence of the following code in the page.tpl.php file

But what if you want a different looking icon? Maybe something larger, or a different color?

Well, there are a couple of ways to achieve this:

• The not-so right way
• The right way

1. The not-so right way

Drupal's default RSS feed icon image is located in your site's folder structure at 'misc/feed.png'. The not-so right way to change it is to simply swap this feed.png image for another feed icon image (just making sure to also name the new image feed.png).

This method will work, but is not recommended. The reason being, that you are effectively overwriting a core file. When you do an upgrade of Drupal, your new feed.png image will be replaced with the original feed.png image and you will need to update it again. This is clearly not a good idea if you have lots of sites or are doing sites for clients who do not know how to do such updates, and ultimately it's just an all round messy solution.

So, a far better solution would be one where we do not alter any core stuff, and the new feed icon remains in place even after an upgrade...this is the right way.

2. The right way

The first thing we need to do is find out what function Drupal is using to output the feed icon. So, go over to Drupal API, and do a search for feed_icon. The search should return one result - theme_feed_icon. This is exactly what we're after. Anytime you see the word 'theme_' at the beginning of a function it means that we can override the function - which is what we want to do in this case.

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

UPDATE
The following tutorial covers the creation of custom regions in Drupal 5 themes. If you are using Drupal 6 please see the newer creating custom regions in Drupal 6 themes instead.

----------

All Drupal themes you download will come with a number of pre-defined regions into which you can already place blocks (normally header, left-sidebar, content, right-sidebar, footer), but it can sometimes be useful to create your own.

This can seem a little daunting at first, but it's really just a simple two-step process:

• step 1 - define the custom region in your template.php file
• step 2 - add the custom region to your page.tpl.php file

So, lets see how it works.

Step 1 - define the custom region in your template.php file

All themes should have a template.php file contained within the theme folder.

Open the template.php file in your chosen editor and locate the function titled 'function nameoftheme_regions' (where nameoftheme will be the name of the theme to which you are adding a custom region). This will probably be the first function in the file, and should look something like this:

Okay, now just add your custom region so that it looks like the pre-defined regions.