How to theme specific blocks in Drupal

Drupal blocks can be themed on several levels. You can create a custom html layout for all the blocks on your site, you can create a different layout for a specific region on your site, you can customize the blocks according to the module that created the blocks, or you can even theme an individual block with its own unique html and corresponding CSS styles.

For most themes you should already have a block.tpl.php file in the folder of the theme you are using. If you are completely new to Drupal you are probably not building your theme from scratch, but if you are creating a theme out of nothing and the block.tpl.php file doesn’t exist yet you should go ahead and create it.

A standard block.tpl.php file from Garland (a default theme that ships with Drupal) looks like so in Drupal 6:
<?php
// $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $
?>
<div id=”block-<?php print $block->module .’-‘. $block->delta; ?>” class=”clear-block block block-<?php print $block->module ?>“>

<?php if (!empty($block->subject)): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

  <div class=”content”><?php print $block->content ?></div>
</div>

How to override the html for all the blocks in a Drupal theme

The code above is a good starting point for a most themes, and you can do a lot with CSS to make it bend to you will, however sometimes you may want to change something in a way that is only possible with html such as adding an additional div tag or subtracting one. Now if you want this customization to apply to all block in the theme then block.tpl.php is the place to do it. You can rearrange the tags, add classes, ids, or even remove elements all together and it will affect all blocks in the theme (at least those not overriden by more specific tpls). Be careful not to break the html though by removing a closing tag without removing the start tag or vice versa.

How to style blocks by region in a Drupal theme

What if you want the blocks on the footer to be different than the blocks in the right sidebar though? In that case you would want to have your customizations made on a per region basis. In order to make a custom layout for a block by region you just need to create a tpl file for the region using the following formula: block-regionname.tpl.php. So if that region was the footer then you would create a file called block-footer.tpl.php in you theme folder and hack away. In most cases you will probably want to start by using the contents of the original block.tpl.php file as a starting point and go from there.

How to style individual blocks in a Drupal theme

Styling individual blocks follows the same basic pattern as styling regions, but there is one extra step. You have to find the unique block name so that you can know how to name the tpl file.
To do so there are two methods that work. One, the old fashion way (and my preferred method) go to the blocks page (admin/build/block) and find the listing for the particular block you wish to alter. Now hover over the link that says “configure”. If you are using Firefox (and you should be) you will need to look to the far bottom left corner of the Firefox window when you hover over the link, doing so shows you where you would go if you were to click the link. Don’t click though, just make note of the last two items of the url. For example when I hover over one of my jquerymenu blocks I see the following link in the left corner: admin/build/block/configure/jquerymenu/0. From that URL all we need are the last two elements: jquerymenu and 0. Using this we can now pinpoint that block for an override by creating a tpl file called block-jquerymenu-0.tpl.php. So essentially the formula is this: block-modulename-delta.tpl.php.

The other method is to use the Theme developer that ships with the Drupal 6 Devel module. Once it is enabled you can click on an element to view the possible tpls that you can use. Admittedly this method is probably easier for beginners, but I don’t care for it much just due to the fact that the theme developer module breaks the javascript of several other modules (including activemenus and my jquerymenu) and it causes some wonky side effects when viewing certain themes. You might love it though especially if you are new to Drupal theming.

How to customize blocks produced by a particular module

To customize the output from all blocks from a particular module you follow all the same steps as you would to customize the individual block, however you omit the last element from the file name. So instead of block-jquerymenu-0.tpl.php you would just write block-jquerymenu.tpl.php and place your customizations within that file.

That should give you a good starting point for theming Drupal blocks. You can do some pretty fancy stuff with it once you understand it. Have fun.