Advanced Theming in Drupal

Following on from the short piece I wrote on how to change a node's title in Drupal, this article will discuss some more advanced theme issues in Drupal 6. There is way, way too much for me to cover everything in this article, but it will contain some basic theming information, and indicate where to look if you want to know more.

I'll cover:

• A Quick Overview of Theming
• Theme Developer Module (a.k.a. devel)
• Theming a Specific Content Yype
• Theming a Specific Node
• Theming your Front Page
• Theming a Block Region
• How to Spell 'theming'

Spelling

Starting with the last item on the list: maybe you have no problem with this, but I certainly do, the correct spelling is t-h-e-m-i-n-g. When I write out, I often add in an extra 'e' in the middle of the word. I don't even notice I'm doing it!

Theming - A Quick Guide

First off, here are some sites to check out: Drupal Theme page, and Theme Garden.

Drupal operates with a separation of content and display. Themes are essentially a collection of files that outline how to organise the content. Within themes themselves there should be another separation of layout and display, via HTML and CSS; I'm not going to explain CSS and HTML, there are loads of sites that already do that.

CSS files in Drupal themes are exactly the same as CSS files you would find in any website. There is nothing special about them.

The HTML in Drupal themes is placed in PHP files, with a specific file extension '.tpl.php'.

When you add files to a theme, or make changes to certain files, you have to rebuild the theme registry. I do this via the 'devel' module and 'admin menu'. The devel module will be discussed below, and the admin menu is a handy module you should be using if you are a Drupal admin.

If you are writing your first theme, download a theme, enable it, and start to make some changes to the files. See what happens. It will start to give you an understanding of what each element of the theme does.

Quick Tip: If you are trying to figure out what a specific CSS element controls, try adding color: red !important; to the CSS for that element. Everything that element effects should know contain red text.

Quick Tip Number 2:Use the Web Developer toolbar and Firebug. There is just too much in each of these, but what I will say is make use of the 'Outline Current Element' functionality of Web Developer, and the 'Inspect Element' functionality of Firebug. The former makes it east to figure out what divs are effecting what elements, and the latter will show what styling those divs contain.

Anatomy of a Drupal 6 Theme

• Folder - Theme-Name
  • theme-name.info
  • page.tpl.php
  • template.php
  • style.css
  • Folder - Images
    • all images for your theme

The file 'style.css' is automatically included in your theme. However, you don't want to put all your css code into one huge file. To include a second (or third, or more) css file(s), you have to add a line to the .info file:


stylesheets[all][] = style.css
stylesheets[all][] = filename.css


The '.info' file is where you describe your theme. More information on this file: .info drupal theme file.

The 'page.tpl.php' file is the default file that will be used to display almost everything on your site.

Theme Developer Module

a.k.a. devel module. The devel module has a number of sub-modules, for theming you will want the 'Devel' and the 'Theme Developer' modules enabled.

Drupal Devel Sub-Modules

Once you enable this module, if you are using admin menu, the very left menu item (the one with your favicon) will have a 'Flush All Caches' option. This is one of the important ones for theme development. Basically when you create new files, you have to let Drupal find them, and it will only find them if you empty your theme registry (so that Drupal will then re-populate it, in doing that it finds your new files). If you are editing files that are already in the registry, just refreshing the page should apply those changes.

If you are not using admin menu (why not?), you can enable a 'devel' block, it will look something like this:

Devel block

I don't use this block at all, but I'm pretty sure the 'Empty Cache' option is the one you want! There are some other potentially useful options in that block too, but like I said, I don't use it.

The next change you should notice, is a checbox appearing at the bottom left of your screen, like this:

Themer Info Checkbox

When you select that checkbox, an overlay will appear on your page:

Drupal Themer Overlay

Do like the overlay says, and click on something on your page. It will tell you which function and template file is theming that element.

If you click on the background for your page, that specific pages template file is shown to you, and more imporantly, the names of template files you can use to override that node's theme:

Drupal Themer Overlay - Template Names

In the image above, I am on the front page of the site. So, I have the following options to overwrite the template:

page-front.tpl.php
page-node-1.tpl.php
page-node.tpl.php

page-front.tpl.php: if it exists, will always be applied to whichever page/node/set-of-nodes is the designated front page of your site.

page-node-1.tpl.php: if it exists, it will be applied to the node that has the nid '1', i.e. the first node you created on your site. If the nid of the node you want to theme is '243', this file would be called page-node-243.tpl.php.

page-node.tpl.php: if it exists, this file will theme all nodes.

Theming a Specific Node

Theming a specific node has already been mentioned, but I'm going to make it explcit here. You need to find the node ID, or 'nid' of the node you want to them. If you are not using path or pathauto, the nid will be the last number that appears in the path, e.g. example.com/node/54, this node has nid 54. Even if you are using path/pathauto, if you edit a node, the node number will appear, e.g. http://example.com/node/948/edit, the nid here is '948'.

Once you have the nid, you can create a template file named:

page-node-.tpl.php

In the last example above the file woule be:

page-node-948.tpl.php

A good starting point is to make a copy of your standard page.tpl.php file, rename it to page-node-.tpl.php, and start to make changes in there, and potentially make changes to your CSS file also.

Theming a Specific Content Type

Theming a single node is fine, but you might want to theme an entire content type. To do this, only one extra step is required. In your theme, you should have a file called template.php, if you don't, then create that file.

In that file, add the following lines (replacing with the name of your theme):


<?php
function my_theme_preprocess_page(&$variables) {
if ($variables['node']->type != "") {
$variables['template_files'][] = "page-node-" . $variables['node']->type;
}
}
?>


This tells Drupal to look for a template for each content type called:

page-node-.tpl.php

Once you have this file created for your content type, and you've cleared your registry again, you can start making changes to that file, and all nodes of that content type will reflect those theme changes.

Theming your Front Page

This was already mentioned, but I'm going to make it explicit here. If you want to theme your front page, you create a file called:

page-front.tpl.php

This file will always be applied to the front page of your site.

Theming a Block Region

Theming a block region is similar to theming a page. You can use the 'themer info' check box and overlay once again. Select the checkbox to enable the themer info overlay, then click on the block region in question. Again, you will receive suggestions for the names of template files that can be used to overwrite a block region:

Drupal Themer Overlay - Block Regions

The name of the block region in the image above if front_knowledge, so the offered template names include block-front_knowledge.tpl.php. This template will be applied to all blocks that are added to the region named front_knowledge. So, if your region was called left_sidebar, you could create a template file called block-left_sidebar.tpl.php and all blocks in this region would use this template.

The same rules apply to with regard to PHP, HTML, and CSS within this file as when you are theming entire nodes/pages.

Conclusion

At this point you should enough knowledge to start theming nodes, pages, and blocks in your site, and enough knowledge and terminology to search the internet if you come up with problems!

You can also add a comment below if you are having specific problems and I can help out.