Dynamically Styling Modules and Blocks

*This is the fourth and final article in the series of Packpub Drupal theming articles from their new book Drupal 6 Themes—Dynamically Styling Modules and Blocks in Drupal 6.*

The default templates and themable functions supply much of the key output on a Drupal site, and many are positioned on the page through the assignment of blocks to regions. In this article, we want to look at how you can control the formatting of a site's various modules and blocks.

Remember, *suggestions only work when placed in the same directory as the base template*. In other words, to get `block-user.tpl.php` to work, you must also place `block.tpl.php` inside in the same directory.

## Dynamically Styling Blocks

Block output is controlled by the block.tpl.php template. As we have seen in other areas, PHPTemplate will look to the names given to multiple template files to determine which template to display. The order of precedence used for the block template is consistent with that used elsewhere:

block order precedence

The naming convention determines what is displayed. At the most specific, you can provide a template to apply to the blocks of a specific module of a specific delta `(block-modulename-delta.tpl.php)`.You can also attach a template to blocks of a module by module name `(block-modulename.tpl.php)`, or to the blocks of a particular region `(block-regionname.tpl.php)`. Failing the presence of any of the above, the system applies the default `block.tpl.php` template.

Note that the order of precedence includes the name of the module that produces the output being displayed in the block. Delta is a system-generated value that provides a unique identifier for each block.

> All blocks manually created by the user share the module name "block.".

If you are not certain of the provenance of your block, that is, the name of the module that produces the block or the block's delta, try using the Theme Developer feature of the Devel module. If you have the Devel module installed on your site, you can harvest this information in the form of a list of suggestions quite easily. To use this feature:

1. Install the Devel module.
2. Activate the Theme Developer option.
3. Open your browser and go to the page where your block appears.
4. Click the **Themer Info** checkbox on the bottom left of the screen, then click on the block in question.

When you click on the element, a pop up will appear, like the one in the following illustration:

Devel themer

Looking at the above screenshot, you can see the suggestions relevant to the block in our example:

Block Template Suggestions
Template Will apply to...
block-user-2.tpl.php The Who's Online block.
block-user.tpl.php All blocks output by the User module.
block-left.tpl.php All blocks in the sidebar-left region.
block.tpl.php All blocks.

You can also use the Theme Developer extension to help you identify potential suggestions for page templates.

## Dynamically Styling the Comment Module

The [base template](http://drupal.org/node/190815) of the comment module can be dynamically styled using the suggestions provided by the system. The principal comment template, `comment.tpl.php`, can be styled according to the node type with which the comment is associated by using the syntax `comment-[type].tpl.php`. The default comment wrapper template `(comment-wrapper.tpl.php)` can also be styled according to the node with the syntax `comment-wrapper-[type].tpl.php`.

## Dynamically Styling the Forum Module

The base template of the forum module is `forums.tpl.php`. There are several options open for suggestions for both forum containers and topics:

Forum Template Suggestions
Suggestion Will apply to...
forums-topics.tpl.php Forum topics.
forums-topics-[forumID].tpl.php Forum topics belonging to a forum of a specific ID.
forums-containers.tpl.php Forum containers.
forums-containers-[forumID].tpl.php Forum containers belonging to a forum of a specific ID.
forums-[forumID].tpl.php Forum of a specific ID.

## Dynamically Styling the Polls Module

The Polls module is the subject of a number of default templates. There are default suggestions available for all the key templates:

Poll Template Suggestions
Default template Suggestion syntax
poll-results.tpl.php poll-results-[block].tpl.php
poll-vote.tpl.php poll-vote-[block].tpl.php
poll-bar.tpl.php poll-bar-[block].tpl.php

## Dynamically Styling Nodes

PHPTemplate provides a specific template for nodes—`node.tpl.php`. Using the same principles of precedence we've seen throughout, you can provide alternative node templates to suit your needs. To provide a template for the blog node, for example, create `node-blog.tpl.php`; for the story node, `node-story.tpl.php`. In the absence of a more specific template, the system will apply the default `node.tpl.php` file. The table below shows the suggestions for the default system:

Node Template Suggestions
Suggestion Affected node
node-blog.tpl.php blog entries
node-forum.tpl.php forum entries
node-book.tpl.php book entries
node-story.tpl.php story entries
node-page.tpl.php page entries

Note that you cannot use `node-admin.tpl.php` to theme your admin pages. As noted elsewhere in this article, you can style the admin section either by setting an *admin-specific theme* or by creating the `page-admin.tpl.php` template.

## Summary

This article covers the basics needed to make your Drupal theme responsive to the contents and the users. In this article we had a look at running multiple templates, and at creating dynamic elements and styles.

Drupal 6 Themes

Create new themes for your Drupal 6 site with clean layout and powerful CSS styling

  • Learn to create new Drupal 6 themes
  • No experience of Drupal theming required
  • Techniques and tools for creating and modifying themes
  • A complete guide to the system's themable elements


Last updated 22nd April, 2009 - 6:08pm

Authored by Jeff Burnz on