C H A P T E R 9
■ ■ ■
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.
185
CHAPTER 9 ■ THE THEME SYSTEM
■ 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.
Building a Theme
There are several ways to create a theme, depending on your starting materials. Suppose your designer has already given you the HTML and CSS for the site. It’s relatively easy to take the designer’s HTML and CSS and convert it into a Drupal theme.
The general steps for creating a new Drupal theme include the following:
1.Create or modify an HTML file for the site.
2.Create or modify a CSS file for the site.
3.Create an .info file to describe your new theme to Drupal.
4.Standardize the file names according to what Drupal expects.
5.Insert available variables into your template.
6.Create additional files for individual node types, blocks, and so on.
We’ll start constructing our new theme by first deciding on a name—“Grayscale”—and then create a directory in the sites/all/themes directory using that same name (sites/all/themes/grayscale). Next we’ll need to create an .info file for our new theme in the sites/all/themes/grayscale directory. I’ll create the grayscale.info file initially with the basic information necessary to incorporate the theme into Drupal’s theme registry:
186
CHAPTER 9 ■ THE THEME SYSTEM
name = Grayscale core = 7.x
engine = phptemplate
Once you’ve saved the grayscale.info file, you can now enable the theme by clicking the Appearance link at the top of the page and scrolling down until you see the Grayscale theme. Click the “Enable and set default” link to apply the theme as the site’s default theme. Click the Home button to visit the home page of your site, and volia! You have a new Drupal theme (see Figure 9-1), and all you had to do was create three lines of code in the .info file.
Figure 9-1. The site rendered in the Grayscale theme
187
CHAPTER 9 ■ THE THEME SYSTEM
While it would never win an award for creative design, the process that you just walked through shows how simple it is to create a Drupal theme from scratch. Let’s expand on our site a little bit by applying some CSS to rearrange and style things a bit. The first step is to create a new directory in your Grayscale theme directory called css. While it’s not required that you put all of your CSS files into a subdirectory, it does make it nice so that others don’t have to dig through your theme directory to locate all the CSS files. In the css directory, create a new file named style.css. The name is purely arbitrary, but several Drupal themes use style.css as the naming convention for the primary .css file associated with that theme.
Next we need to instruct our theme to apply style.css to the theme. To do that, we’ll update the grayscale.info file by adding the following line:
stylesheets[all][] = css/style.css
This specifies that style.css should be applied to all mediums used to display the site (screen, projector, and print). You can also apply style sheets that are specific to a particular medium—for example, print, by using the following:
stylesheets[print][] = css/print.css
Or to use a style sheet for both screen and projector combine the two as shown below:
stylesheets[screen, projector][] = theScreenProjectorStyle.css
For our purposes, we’ll stick with all mediums.
Next we’ll examine the structure that Drupal used to render the page so that we can identify CSS IDs and classes to apply styles to. If you use Firefox, I suggest that you download and install Firebug (http://getfirebug.com). If you use Internet Explorer, I suggest you download and install the IE Developers Toolbar (www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218- b75d-b8856fced535), or if you’re using Safari, try the built-in web inspector. All three tools provide the ability to inspect the structure of the site and easily identify which CSS IDs and classes to apply styling to. Figure 9-2 shows the types of information that Firebug for Firefox displays when inspecting a page.
188
CHAPTER 9 ■ THE THEME SYSTEM
Figure 9-2. Output generated by Firefox’s Firebug tool
Take a moment to download one of the tools if you don’t already have it, and once installed, use the Inspection option to examine the structure of the HTML and the DIVs that were generated by Drupal.
189
Download from Wow! eBook <www.wowebook.com>
CHAPTER 9 ■ THE THEME SYSTEM
The next step is to define the styling for the CSS IDs and classes. Before taking that step, let’s look at the page source of our site to see the HTML generated by Drupal for the home page of our new site, focused on the structure of the DIV tags. I’ll omit the HTML between the DIV tags for brevity’s sake. If you want to see the details of the page, simply right-click in the browser window and select view source as it appears on the screen. I’ll show just the DIV structure between the <body> and </body> tags.
<body class="html front logged-in one-sidebar sidebar-first page-node toolbar toolbardrawer" >
<div id="skip-link"> … </div>
<div class=”region region-page-top”>..</div> <div id=”page-wrapper”>
<div id=”header”>
<div class=”section clearfix”> <a id=”logo” … ></a>
<div id=”name-and-slogan”></div> </div>
</div>
<div id=”navigation”> <div class=”section”>
<ul id=”main-menu”>….</ul> <ul id=”seconary-menu”>…</ul>
</div>
</div>
<div id=”main-wraper”> <div id=”main”>
<div id=”content”>…</div>
<div id=”sidebar-first” class=”column sidebar”>…</div> </div>
</div>
<div id=”footer>…</div> </div>
</body>
There is significantly more between the DIV tags, but what is important for our exercise is to understand the general DIV structure so we can add style definitions to the css/style.css file. The following (see listing 9-1) are CSS definitions that I used to create the visual design shown in Figure 9-3.
Listing 9-1. Contents of style.css
body {
background-color: #c6c6c6;
}
#page {
background-color: #c6c6c6;
}
190
CHAPTER 9 ■ THE THEME SYSTEM
#skip-link { width: 960px;
margin-right: auto; margin-left: auto; background-color: #c6c6c6;
}
#header { width: 960px;
background-color: #ffffff; margin-right: auto; margin-left: auto; margin-top: 10px;
height: 40px; padding-top: 10px;
border-top: 3px solid #000; border-bottom: 3px solid #000;
}
#logo {
float: left; margin-left: 20px;
}
a#logo { text-decoration: none;
}
#name-and-slogan { float: left; margin-left: 100px;
}
#site-name a { text-decoration: none;
}
#navigation { width: 960px;
margin-right: auto; margin-left: auto; background-color: #c6c6c6; height: 45px;
}
#navigation h2 { display: none;
}
191
CHAPTER 9 ■ THE THEME SYSTEM
ul#main-menu { background-color: #EEE; height: 25px;
}
ul#main-menu { text-decoration: none; padding-top: 5px;
}
ul#main-menu li a { text-decoration: none; padding-right: 10px;
}
ul#secondary-menu { background-color: #333; height: 25px;
}
ul#secondary-menu li a { text-decoration: none; color: #fff; padding-right: 10px; height: 25px;
border-right: 1px solid #fff;
}
ul#secondary-menu a:hover { color: #ff0000;
}
#main-wrapper { clear: both;
background-color: #ffffff; width: 960px; margin-right: auto; margin-left: auto;
}
#main {
width: 960px; margin: 5px auto;
}
#content { width: 775px; float: right;
padding-left: 15px;
}
192
CHAPTER 9 ■ THE THEME SYSTEM
#sidebar-first { float: left; width: 130px; margin:0; padding: 20px;
background-color: #EEE;
}
#footer { width: 920px; padding: 20px;
margin-right: auto; margin-left: auto; clear: both; min-height: 100px; background-color: #333; color: #fff;
}
#footer a { color: #fff;
}
After saving style.css, revisit the home page of your site. It should look something like Figure 9-3.
Figure 9-3. The site after applying the style sheet additions
193