The Theme System

Changing the HTML or other markup that Drupal produces requires knowledge of the layers that make up the theme system. In this chapter, I’ll teach you how the theme system works and reveal some of the best practices hiding within the Drupal 7 core. Here’s the first one: you don’t need to (nor should you) edit the HTML within module files to change the look and feel of your site. By doing that, you’ve just created your own proprietary content management system and have thus lost one of the biggest advantages of using a community-supported open source software system to begin with. Override,  don’t change!

Themes
In Drupal-speak, themes are a collection of files that make up the look and feel of your site. You can download preconstructed themes from http://drupal.org/project/themes, or you can roll your own, which is what you’ll learn to do in this chapter. Themes are made up of most of the things you’d expect to see as a web designer: style sheets, images, JavaScript files, and so on. The difference you’ll find between a Drupal theme and a plain HTML site is targeted template files. Template files typically contain large sections of HTML and smaller special snippets that are replaced by dynamic content as Drupal constructs the page. You can create targeted template files for just about every container of content in Drupal—such as the overall page, regions, blocks, nodes, comments, and even fields. We’ll walk through the process of creating several component-level template files in a bit, but let’s start by installing an off-the-shelf theme from Drupal.org and examine the components that make up that theme.

Installing an Off-the-Shelf Theme
There are hundreds of themes available for Drupal. If you are looking for a quick and easy way to get a site up and running, you might consider browsing through the themes at www.drupal.org/project/themes. Be sure to select “7.x” in the “Filter by compatibility” drop-down list to show only themes that have been ported to Drupal 7.

Note: You must pick a theme that has a Drupal 7 version. Drupal 6 and prior themes will not work on a Drupal 7 site due to the changes in the structure of themes in Drupal 7.

As you browse through the themes, you’ll often run across themes that are described as “starter themes.” Starter themes are focused on providing a solid foundation on which to construct a new theme. Starter themes typically have a wealth of inline documentation and helpful features and functionality.  The benefit of a starter theme is that it provides a solid structure on which to lay graphical elements and colors,  without having to start with a blank “piece of paper.” Themes that are not classified as starter themes already have graphical effects (e.g., images, colors, fonts, etc.) applied and may fit your needs with very little modification.

For demonstration purposes, we’ll install the Pixture Reloaded theme. There’s nothing significant about this theme other than it has been converted to work with Drupal 7. Visit the theme’s page on Drupal.org (http://drupal.org/project/pixture_reloaded), and copy the URL associated with the download link for the Drupal 7 version of the theme. Return to your site, click the Appearance link at the top of the page, and on the Appearance page click the “Install new theme” link. On the form for uploading a new theme, paste the Pixture Reloaded download URL into the text box labeled “Install from a URL,” and then click the Install button. Drupal will download and save the theme in your sites/all/themes directory. You may then enable the theme as the default theme by revisiting the Appearance page and clicking the “Set default” link.  

Installing themes from Drupal.org is simple and quick. You can download any number of themes and give them a test drive on your site by following the foregoing directions, but it is likely that you’ll want at some point to create your own custom theme. In the following sections, I’ll show you how to start with a clean slate and create a brand-new Drupal theme from scratch.