CHAPTER 9 ■ THE THEME SYSTEM
If you printed the values of $classes, you would see, if you didn’t change the default values of font family and font size, the following values:
html front logged-in one-sidebar sidebar-first page-node toolbar toolbar-drawer ff-sss fs-12
You can see that ff-sss and fs-12 were added to the end of the $classes variable. The only thing left to do is to create the CSS to address each of the options. We’ll update the css/style.css file to include styles for each of the options that we defined in the theme-settings.php file we created previously.
/* font family */
.ff-sss {font-family: "Helvetica Nueue", "Trebuchet MS", Arial, "Nimbus Sans L", FreeSans, sans-serif;}
.ff-ssl {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
.ff-a {font-family: Arial, Helvetica, sans-serif;}
.ff-ss {font-family: Garamond, Perpetua, "Nimbus Roman No9 L", "Times New Roman", serif;}
.ff-sl {font-family: Baskerville, Georgia, Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", serif;}
.ff-m {font-family: "Myriad Pro", Myriad, Arial, Helvetica, sans-serif;}
.ff-l {font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva, sans-serif;}
/* Base fontsize */
.fs-10 {font-size:0.833em}
.fs-11 {font-size:0.917em}
.fs-12 {font-size:1em}
.fs-13 {font-size:1.083em}
.fs-14 {font-size:1.167em}
.fs-15 {font-size:1.25em}
.fs-16 {font-size:1.333em}
With everything set, try changing the font family and font size by visiting the Appearance page and clicking the Settings link for the Grayscale theme.
Understanding Template Files
Some themes have all sorts of template files, while others, like our Grayscale theme, have only .info and
.css files. The number of template files required by a theme is dependent on how much customization you want to do to the standard Drupal templates for the various components on your site. As you walk through the various template files, keep in mind that if your theme doesn’t provide one of the template files described here, Drupal itself will apply the template files contained in Drupal core for each associated component (e.g., page, node, comment, field). I’ll show you where each of these files resides in the following sections.
The Big Picture
There are several tpl.php files associated with any given Drupal theme. Some themes provide just the basic html.tpl.php, which you can think of as a theme file that has everything that appears above the <body> tag in a traditional HTML-based web site, and the page.tpl.php file, which you can think of as everything between the <body> and </body> tags in a traditional HTML-based web site. Some themes
198
CHAPTER 9 ■ THE THEME SYSTEM
take advantage of Drupal’s abilities to theme individual components on a page by providing additional theme files, such as the following:
node.tpl.php: The file that defines how nodes are rendered on a page
field.tpl.php: The file that defines how a field is rendered on a page
block.tpl.php: The theme file that defines how blocks are rendered on a page
html.tpl.php is the granddaddy of all template files, and provides the overall page layout for the site. Other template files are inserted into page.tpl.php, as Figure 9-5 illustrates.
Figure 9-5. Other templates are inserted within the encompassing page.tpl.php file.
199
Download from Wow! eBook <www.wowebook.com>
CHAPTER 9 ■ THE THEME SYSTEM
The insertion of html.tpl.php, page.tpl.php, block.tpl.php, node.tpl.php, and field.tpl.php in Figure 9-5 happens automatically by the theme system during page building. If your theme does not contain any or all of these files, Drupal uses the templates shipped with Drupal core, as shown in Table 9-1.
Table 9-1. Drupal’s Core Template Files
Template file |
Location |
Description |
html.tpl.php |
modules/system |
The master template file for your site, including all of the |
|
|
elements found in the <head>…</head> section of an HTML |
|
|
page on your site |
page.tpl.php modules/system |
Defines everything between, and including the <body> and |
|
|
|
</body> tags on the page; when working with the overall |
|
|
structure of the master page layout for your site, this is the |
|
|
file to modify. |
region.tpl.php mo |
dules/system |
Defines how regions are laid out and rendered on your site |
node.tpl.php modules/node |
Defines how nodes are laid out and rendered on your site |
|
block.tpl.php |
modules/block |
Defines how blocks are laid out and rendered on your site |
field.tpl.php |
modules/field/theme |
Defines how fields are laid out and rendered on your site |
Before creating custom versions of some of these template files for our Grayscale theme, let’s take a brief tour of the structure and contents of the core template files just listed.
The html.php.tpl File
This is the default template that displays the basic HTML structure of a page on a Drupal site. The focus of this theme file is on the elements between the opening <HTML> tag and the start of the <body> tag. In the following code, you can see that the html.tpl.php file provides elements like the DOCTYPE definition, RDF definitions, HTML, a few DIV tags, and snippets of PHP code that print the content associated with various variables, which are defined in Table 9-2. While the template file is relatively simple, it does demonstrate the power of a Drupal theme and the ability to display dynamic content by setting the value of variables at runtime and having the theme engine replace those values with content. The value of variables can be set by the context of things like parameters in the URL, whether the user is an anonymous user or one that is logged in, the role of the user if he or she is logged into the site, and other contexts that help define what should be rendered on the page. We’ll see more of this as we look at other template files, but it’s important to understand the significance of the little snippets of PHP code you’ll see in the example html.php.tpl file here.
200
CHAPTER 9 ■ THE THEME SYSTEM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>"> <?php print $head; ?>
<title><?php print $head_title; ?></title> <?php print $styles; ?>
<?php print $scripts; ?> </head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>> <div id="skip-link">
<a href="#main-content"><?php print t('Skip to main content'); ?></a> </div>
<?php print $page_top; ?> <?php print $page; ?>
<?php print $page_bottom; ?> </body>
</html>
Table 9-2 lists all of the variables that are made available to the html.tpl.php file through the various template processor and preprocessor functions. For example, the $css variable contains a list of CSS files for the current page. Those CSS files were defined in the .info file of the theme through the style sheets[all][] that were defined in that file.
■ Note The list of variables for each template file represents the variables that are available to the template. You are not required to use all of the variables in your template file, only those required to support your functional and technical requirements, with the exception of the variables that are used in the html.tpl.php template.
201
CHAPTER 9 ■ THE THEME SYSTEM
Table 9-2. Variables That Are Available for Use Within the html.tpl.php File
Variable |
Description of contents |
|
|
$css
$language
$language->language
$language->dir
$rdf_namespaces $grddl_profile $head_title $head
$styles $scripts $page_top
$page
$page_bottom
$classes
An array of CSS files for the current page
(object) The language the site is being displayed in
Contains its textual representation
Contains the language direction; it will be either “ltr” or “rtl”.
All the RDF namespace prefixes used in the HTML document
A GRDDL profile allowing agents to extract the RDF data
A modified version of the page title, for use in the TITLE tag
Markup for the HEAD section (including meta tags, keyword tags, and so on)
Style tags necessary to import all CSS files for the page
Script tags necessary to load the JavaScript files and settings for the page
Initial markup from any modules that have altered the page; this variable should always be output first, before all other dynamic content.
The rendered page content; Drupal replaces $page with the content of page.tpl.php (see the following section).
Final closing markup from any modules that have altered the page; this variable should always be output last, after all other dynamic content.
String of classes that can be used to style contextually through CSS; by default the $classes variable contains the following: html front logged-in one-sidebar sidebar-first page-node toolbar toolbar-drawer, each of which can be used as suffixes to things like DIV IDs and classes.
202