(For more resources on Drupal, see here.)

Themes

The use of themes makes Drupal exceptionally flexible when it comes to working with the site’s interface. Because the functionality of the site is by and large decoupled from the presentation of the site, it is quite easy to chop and change the look, without having to worry about affecting the functionality. This is obviously a very useful feature because it frees you up to experiment, knowing that if worst comes to worst, you can reset the default settings and start from scratch.

You can think of a theme as a mask for your site that can be modified in order to achieve virtually any design criteria. Of course, different themes have widely varying attributes, so it is important to find the theme that most closely resembles what you are looking for in order to reduce the amount of work needed to match it to your envisaged design.

It is also important to understand that not all downloadable themes are of the same quality. Some are designed better than others. This article utilizes Zen, which is one of the cleanest and most flexible around.

Different themes are implemented differently. Some themes use fixed layouts with tables (avoid these because web design should not rely on tables), while others use div tags and CSS (favor these as they are far more flexible and powerful)—you should play around with a variety of themes in order to familiarize yourself with a few different ways of creating a web page. As mentioned, we only have space to cover Zen here, but the lessons learned are easily transferred to other themes with a bit of time and practice.

Before we go ahead and look at an actual example, it is important to get an overview of how themes are put together in general.

Theme anatomy

Drupal themes consist of a set of files that define and control the features of Drupal’s web pages (ranging from what functionality to include within a page to how individual page elements will be presented) using PHP, HTML, CSS, and images.

Different Drupal 7 template files control different regions of a page, as shown in the following diagram:

Looking at how theme files are set up within Drupal hints at the overall process and structure of that theme. Bear in mind that there are several ways to create a working theme, and not all themes make use of template files. However, in the case of the Drupal’s default theme setup, we have the following:

The left-hand column shows the folders contained within the themes directory. There are a number of standard themes, accompanied by the engines folder that houses a phptemplate.engine file, to handle the integration of templates into Drupal’s theming system.

Looking at the files present in the garland folder, notice that there are a number of PHP Template files suffixed by tpl.php. These files make use of HTML and PHP code to modify Drupal’s appearance. The default versions of these files, which are the ones that would be used in the event a theme had not implemented on its own, can be found in the relevant modules directory. For example, the default comment.tpl.php file is found in modules | comment, and the default page.tpl.php file is located, along with others, in the modules | system folder.

Each template file focuses on its specific page element or page, with the noted exception of template.php that is used to override non-standard theme functions—that is, not block, box, comment, node, or page.

The themes folder also houses the stylesheets along with images, and in the case of the default theme, colors. Of special interest is the .info file that contains information about the theme to allow Drupal to find and set a host of different parameters.

A theme’s .info file holds the basic information about a theme that Drupal needs to know, namely, its name, description, features, template regions, CSS files, and JavaScript.

Here’s Garland’s .info file:

; $Id: garland.info,v 1.9 2009/12/01 15:57:40 webchick Exp $
name = Garland
description = A multi-column theme which can be configured to modify
colors and switch between fixed and fluid width layouts.
package = Core
version = VERSION
core = 7.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css
settings[garland_width] = fluid

; Information added by drupal.org packaging script on 2010-05-23
version = "7.0-alpha5"
project = "drupal"
datestamp = "1274628610"

Note that this file holds, amongst other things:

• Name—A human-readable theme name
• Description—A description of the theme
• Core—The major version of Drupal that the theme is compatible with
• Stylesheets—Stipulate which stylesheets are to be used by the theme

These are not the only types of information that can be held by .info files. As we’ll see a bit later on, when it’s time to add scripts to a theme, they can be added to the .info file too.

To quickly see one way in which .info files can be put to work, look closely at the .info file in the update_test_subtheme theme folder in tests (Below garland):

; $Id: update_test_subtheme.info,v 1.1 2009/10/08 15:40:34 dries Exp $
name = Update test subtheme
description = Test theme which uses update_test_basetheme as the base
theme.
core = 7.x
engine = phptemplate
base theme = update_test_basetheme
hidden = TRUE

; Information added by drupal.org packaging script on 2010-05-23
version = "7.0-alpha5"
project = "drupal"
datestamp = "1274628610"

Notice that this contains a base theme directive that is used to specify the parent, or base, theme.

A sub-theme shares its parents’ code, but modifies parts of it to produce a new look, new functionality, or both.

Drupal allows us to create new sub-themes by creating a new folder within the themes directory and specifying the base theme directive in the new theme’s .info file—just as we saw in update_test_subtheme.

In a nutshell, Drupal provides a range of default themeable functions that expose Drupal’s underlying data: such as content and information about that content. Themes can pick and choose which snippets of rendered content they want to override—the most popular method being through the use of PHP template files in conjunction with stylesheets and a .info file. Themes and sub-themes are easily created and modified, provided that you have some knowledge of CSS and HTML—PHP helps if you want to do something more complicated.

I should make it clear that this system makes building a new theme fairly easy, provided one knows a bit about PHP. Here’s the process:

• Create a new themes folder in the sites | all folder, and add your new theme folder in there—call it whatever you want (provided it is a unique name)
• Copy the default template files (or files from any other theme you want to modify) across to the new theme directory, along with any other files that are applicable (such as CSS files)
• Rewrite the .info file to reflect the attributes and requirements of the new theme, including specifying the base theme directive
• Modify the layout (this is where your PHP and HTML skills come in handy) and add some flavor with your own stylesheet (included into the new theme through the .info file)

Before moving on, there’s one small issue of practicality that must be addressed. When it is time for you to begin doing a bit of theme development, bear in mind that there are many types of browser and not all of them are created equal. What this means is that a page that is rendered nicely on one browser might look bad, or worse, not even function properly on another. For this reason, you should:

Test your site using several different browsers.

The Drupal help site has this to say about browsers:

It is recommended you use the Firefox browser with a developer toolbar and view the formatted sources’ extensions.

I wholeheartedly agree. You can obtain a copy of the Firefox browser at www.mozilla.com/firefox. Firefox should also be extended with Firebug, which is an extremely useful tool for client-side web debugging: https://addons.mozilla.org/en-US/firefox/addon/1843/.

Choosing a base theme

As discussed, Drupal ships with a few default themes, and there are quite a few more available in the Downloads section of the Drupal site. Looking at how Drupal presents its core Themes page under Appearance in the toolbar menu, we can see the following:

Any new themes that are added to the site will be used to enable, disable, configure, or set as a default from this page.

Be aware that some themes might not implement functionality that is important to your site. Ensure that you test each theme thoroughly before allowing users to select it.

Enabling the Stark theme, and setting it as the default theme, causes the site, which has been presented in the standard Garland theme up until now, to look something like this:

This is a vast change from the previous look. Notice too that the entire layout of the site has changed—there are no well defined columns, no visually defined header section, and so on. In addition, the previous fonts and colors have also been demolished.

Take the time to view each theme that is available by default in order to get a feel for how different themes can produce wildly differing looks and layouts.

That is not the end of the story, because the Drupal site also has a whole bunch of themes for us to explore. So head on over to the themes page at http://drupal.org/project/themes and select the relevant version tab to bring up the themes that are available.

You have already seen how to download and install other modules, and the process for installing themes is no different—download and extract the contents of the desired theme to the themes folder in sites | default or sites | all. For example, the Zen theme was downloaded and extracted, and provides us with a new option in the list of themes (some downloads will provide a number of sub-themes too), as shown in the following screenshot:

Enable and set default causes the site to look like the next screenshot:

Notice that while the color scheme is effectively non-existent, the page has retained its overall structure in that it has defined sidebars, a header region, and a central content region. Before we begin customizing this, let’s take a look at the configuration settings for this theme.