Drupal 7 Themes

4.5 (2 reviews total)
By Ric Shreves
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Learning the Basics of Drupal Theming

About this book

Drupal is an award winning open source Content Management System (CMS). Based on PHP and MySQL, its power and flexibility combined with its exceptional design mean it is one of the most popular choices for creating a CMS website.

Drupal employs a specialized templating system and supports themes, which allow you to change the look and feel of your system's front and back-end interfaces.

Drupal 7 Themes is an ideal introduction to theming with Drupal 7. If you want to create a striking new look for your Drupal 7 website, this book is for you. This book is a revised, updated and expanded edition of Drupal 6 Themes, rewritten specifically for Drupal 7.

This book will show you techniques and tools to help you improve the look and feel of any Drupal 7-powered website. Starting from the basics of theme setup and configuration, you will learn about the Drupal theming architecture and the PHPTemplate engine, and then move on to modifying existing themes and building new themes from scratch. You will find out about tools to make your theme development easier.

Publication date:
May 2011
Publisher
Packt
Pages
320
ISBN
9781849512763

 

Chapter 1. Learning the Basics of Drupal Theming

This chapter introduces the key concepts that underpin the Drupal theming system and explains the role that themes play in the presentation of a site's output.

The chapter covers the various types of themes, the elements of a theme, and the functions those elements fulfill. At the end of the chapter, we will also look at the themes contained in the Drupal distribution and examine exactly what it is that makes each theme distinct.

The contents of this preliminary chapter provide the general comprehension necessary to grasp the big picture of the role of themes in Drupal. Think of the knowledge communicated in this chapter as a foundation upon which to build the skills that follow in the subsequent chapters.

The topics covered in this chapter include:

  • The role of themes in the Drupal system

  • Basic principles to guide your work

  • The relationship between theme files and the theme engine

  • The output of the themes for both site visitors and site administrators

  • An overview of the default themes

Let's start by looking at the key role themes play in the Drupal system.

The importance of themes in Drupal

The theme employed on your Drupal site defines the visual appearance of the site. The theme files control the placement of the elements on the screen and impact both the presentation of the contents and the usability of the functionality. How well a theme is designed and implemented is, therefore, largely responsible for the first impression made by your site. Themes are the most visible, and arguably the most influential, element of your Drupal site.

While the default Drupal distribution includes a set of themes that will prove sufficient for some users, it is assumed that you are reading this book out of a desire to do more, whether it be only to install additional themes and customize them or to build your own themes.

In order to grasp better some of the challenges (and opportunities) associated with Drupal themes, it is useful to look at four concepts that run throughout this book. These concepts impact the way you will use the system and the way in which you will plan your theme deployment.

The four concepts are:

  • One template or many? It's up to you

  • Get creative with configuration

  • Intercept and override

  • Sub-themes are your friends

One template or many? It's up to you

Drupal allows you to implement customizations to your theme at a variety of levels, and thereby provides you with extremely granular control over the appearance of your site. While you do have the option to set a single unified look for the entire site, you also have the option to create visually distinct pages or groups of pages. You can even control the appearance of the individual elements on specific pages, if you so desire.

The Drupal theme system permits you to assign different templates to different purposes on your site. You can, for example, create a nice visual template for use on your home page, then build another suitable for the display of text on your content pages, and yet another for use on your forms pages. Indeed, not only can you specify different templates for different pages, but you also have the ability to provide styling for specific types of content or even for the output of a particular functionality. As you will see later in this chapter, templates can be nested inside each other, giving you the ability to affect the site's look and feel at multiple levels.

The Drupal system is sometimes the subject of criticism due to its perceived complexity. While the system does exhibit a certain degree of complexity, with it comes a great deal of power. Once you develop familiarity with the system and attain a bit of practice, you will discover that the system is very flexible and rewarding. In the following chapters, we will look at how to implement multiple templates and how to theme and configure all the various constituent parts of the Drupal system.

Get creative with configuration

Use Drupal's blocks functionality to impact the presentation layer via thoughtful use of the configuration and placement options.

A great deal of the output you see on the screen of a Drupal site is provided by the system's blocks and modules. The process of activating modules and assigning blocks to the pages is one of the most basic and important skills in Drupal site building. A great deal of flexibility can be squeezed out of the system in this area alone. Understanding the configuration options available for the blocks and modules is one of the keys to building interesting and usable sites.

Modules are standalone bits of code mini applications in some cases that extend the functionality of your site. It is through modules that Drupal provides functions like the Forum, the Aggregator, and even additional administration functionality, like the Overlay module.

Some modules produce output that appears on the screen, for example, the Forum module, which produces a threaded discussions functionality with extensive output. Other modules simply add functionality, for example the Database Logging module, which simply logs and records system events to the database. The administrator is able to toggle modules on or off and where those modules also provide blocks, the administrator is able to assign the blocks to the various regions in the theme.

In addition to the blocks produced by modules, you can also create blocks specific to your installation. Manually-created blocks provide an easy avenue for placement of additional information (for example, text or images), or by inclusion of PHP code in the block, additional functionality. Each of the blocks in the system, whether created by modules or manually created by the system administrator, can be themed individually.

This system, however, is not without complications. Module developers typically build their modules to be self-contained units. This independence also extends to the presentation layer of these discreet items of code. As a result, almost all the modules have distinct formatting and specific files that control that formatting. This approach to programming and modularization leads to a system in which a significant number of discrete units must be dealt with, adding greatly to the potential for complexity in changing the look and feel of a site to your specifications.

Each of the functional units each module is kept in a separate directory inside the modules folder. Many contain their own CSS files, creating a large number of stylesheets scattered throughout the system. Add to that already daunting collection of modules any additional extensions you might have installed on your site and you can see how CSS juggling might come to dominate your life. Nevertheless, fear not, as styling all of this is manageable, using the technique discussed in the next section.

Intercept and override

Use Drupal's order of precedence to display only the files you want to display.

While Drupal may be more complex than some competing systems, the architecture of Drupal is both logical and consistent. One of the key advantages of Drupal's architecture is the ability to intercept and override the output of the default system without having to make changes to the core files.

In simple terms, it works like this: During the process of getting data from its raw form to its final displayed form, Drupal provides several opportunities for you to affect the output. The Drupal system relies on a pre-determined hierarchy to determine the order in which files are processed. You can use this to your advantage by creating files of your own and injecting them into the process, thereby taking precedence over the default files.

While it is possible (even tempting!) to modify the files in the core, it is strongly discouraged. The best-practice approach to customizing your Drupal site involves intercepting and overriding files and styles, that is, creating new code or styles that the system will display in place of the default code or styles.

For example, if you wish to style a particular block, instead of hacking the module that produces it, you can intercept the CSS styles or the template used by that block with styles or a template of your own (indeed, you may even use a combination of these techniques!). The new styles and templates you create will be a part of the theme itself and will be stored in a directory distinct from the default core files.

By choosing to affect the system's output by intercepting and overriding the default files, we leave the core in its original state. This approach has several advantages, the most significant being that system upgrades and patches can be applied to the core without fear of losing modifications necessary to your presentation. Sites customized in this manner are easier to maintain and your code remains portable and available for re-use in other deployments.

Note

"override" as used in this context, refers to creating a file, function, or style which is redundant with an existing file, function, or style. Courtesy of Drupal's architecture, if you place the new file, function, or style in the active theme's directory, the new files will be used by the system in preference to the default files. The use of intercepts and overrides to modify the look and feel of a Drupal theme is the subject of Chapter 4,

Sub-themes are your friends

Get a fast start on creating new themes by letting an existing theme do most of the work.

Instead of coding a new theme from scratch, you can create a sub-theme, that is, a new theme that uses part of the files, styles, and templates of an existing theme. Sub-themes are the painless way to create new themes. Instead of re-inventing the wheel, you find an existing theme that meets part of your needs, then you simply create a sub-theme based on that theme. Once you have created the sub-theme you can modify it to fit your needs.

To make this approach even more attractive, there are themes that are specifically intended for use as the starting point for sub-themes. You will see later in Chapter 6, Creating a New Theme, how you can use these themes to build new themes tailored to your needs.

 

The importance of themes in Drupal


The theme employed on your Drupal site defines the visual appearance of the site. The theme files control the placement of the elements on the screen and impact both the presentation of the contents and the usability of the functionality. How well a theme is designed and implemented is, therefore, largely responsible for the first impression made by your site. Themes are the most visible, and arguably the most influential, element of your Drupal site.

While the default Drupal distribution includes a set of themes that will prove sufficient for some users, it is assumed that you are reading this book out of a desire to do more, whether it be only to install additional themes and customize them or to build your own themes.

In order to grasp better some of the challenges (and opportunities) associated with Drupal themes, it is useful to look at four concepts that run throughout this book. These concepts impact the way you will use the system and the way in which you will plan your theme deployment.

The four concepts are:

  • One template or many? It's up to you

  • Get creative with configuration

  • Intercept and override

  • Sub-themes are your friends

One template or many? It's up to you

Drupal allows you to implement customizations to your theme at a variety of levels, and thereby provides you with extremely granular control over the appearance of your site. While you do have the option to set a single unified look for the entire site, you also have the option to create visually distinct pages or groups of pages. You can even control the appearance of the individual elements on specific pages, if you so desire.

The Drupal theme system permits you to assign different templates to different purposes on your site. You can, for example, create a nice visual template for use on your home page, then build another suitable for the display of text on your content pages, and yet another for use on your forms pages. Indeed, not only can you specify different templates for different pages, but you also have the ability to provide styling for specific types of content or even for the output of a particular functionality. As you will see later in this chapter, templates can be nested inside each other, giving you the ability to affect the site's look and feel at multiple levels.

The Drupal system is sometimes the subject of criticism due to its perceived complexity. While the system does exhibit a certain degree of complexity, with it comes a great deal of power. Once you develop familiarity with the system and attain a bit of practice, you will discover that the system is very flexible and rewarding. In the following chapters, we will look at how to implement multiple templates and how to theme and configure all the various constituent parts of the Drupal system.

Get creative with configuration

Use Drupal's blocks functionality to impact the presentation layer via thoughtful use of the configuration and placement options.

A great deal of the output you see on the screen of a Drupal site is provided by the system's blocks and modules. The process of activating modules and assigning blocks to the pages is one of the most basic and important skills in Drupal site building. A great deal of flexibility can be squeezed out of the system in this area alone. Understanding the configuration options available for the blocks and modules is one of the keys to building interesting and usable sites.

Modules are standalone bits of code mini applications in some cases that extend the functionality of your site. It is through modules that Drupal provides functions like the Forum, the Aggregator, and even additional administration functionality, like the Overlay module.

Some modules produce output that appears on the screen, for example, the Forum module, which produces a threaded discussions functionality with extensive output. Other modules simply add functionality, for example the Database Logging module, which simply logs and records system events to the database. The administrator is able to toggle modules on or off and where those modules also provide blocks, the administrator is able to assign the blocks to the various regions in the theme.

In addition to the blocks produced by modules, you can also create blocks specific to your installation. Manually-created blocks provide an easy avenue for placement of additional information (for example, text or images), or by inclusion of PHP code in the block, additional functionality. Each of the blocks in the system, whether created by modules or manually created by the system administrator, can be themed individually.

This system, however, is not without complications. Module developers typically build their modules to be self-contained units. This independence also extends to the presentation layer of these discreet items of code. As a result, almost all the modules have distinct formatting and specific files that control that formatting. This approach to programming and modularization leads to a system in which a significant number of discrete units must be dealt with, adding greatly to the potential for complexity in changing the look and feel of a site to your specifications.

Each of the functional units each module is kept in a separate directory inside the modules folder. Many contain their own CSS files, creating a large number of stylesheets scattered throughout the system. Add to that already daunting collection of modules any additional extensions you might have installed on your site and you can see how CSS juggling might come to dominate your life. Nevertheless, fear not, as styling all of this is manageable, using the technique discussed in the next section.

Intercept and override

Use Drupal's order of precedence to display only the files you want to display.

While Drupal may be more complex than some competing systems, the architecture of Drupal is both logical and consistent. One of the key advantages of Drupal's architecture is the ability to intercept and override the output of the default system without having to make changes to the core files.

In simple terms, it works like this: During the process of getting data from its raw form to its final displayed form, Drupal provides several opportunities for you to affect the output. The Drupal system relies on a pre-determined hierarchy to determine the order in which files are processed. You can use this to your advantage by creating files of your own and injecting them into the process, thereby taking precedence over the default files.

While it is possible (even tempting!) to modify the files in the core, it is strongly discouraged. The best-practice approach to customizing your Drupal site involves intercepting and overriding files and styles, that is, creating new code or styles that the system will display in place of the default code or styles.

For example, if you wish to style a particular block, instead of hacking the module that produces it, you can intercept the CSS styles or the template used by that block with styles or a template of your own (indeed, you may even use a combination of these techniques!). The new styles and templates you create will be a part of the theme itself and will be stored in a directory distinct from the default core files.

By choosing to affect the system's output by intercepting and overriding the default files, we leave the core in its original state. This approach has several advantages, the most significant being that system upgrades and patches can be applied to the core without fear of losing modifications necessary to your presentation. Sites customized in this manner are easier to maintain and your code remains portable and available for re-use in other deployments.

Note

"override" as used in this context, refers to creating a file, function, or style which is redundant with an existing file, function, or style. Courtesy of Drupal's architecture, if you place the new file, function, or style in the active theme's directory, the new files will be used by the system in preference to the default files. The use of intercepts and overrides to modify the look and feel of a Drupal theme is the subject of Chapter 4,

Sub-themes are your friends

Get a fast start on creating new themes by letting an existing theme do most of the work.

Instead of coding a new theme from scratch, you can create a sub-theme, that is, a new theme that uses part of the files, styles, and templates of an existing theme. Sub-themes are the painless way to create new themes. Instead of re-inventing the wheel, you find an existing theme that meets part of your needs, then you simply create a sub-theme based on that theme. Once you have created the sub-theme you can modify it to fit your needs.

To make this approach even more attractive, there are themes that are specifically intended for use as the starting point for sub-themes. You will see later in Chapter 6, Creating a New Theme, how you can use these themes to build new themes tailored to your needs.

 

What is a theme?


In the context of Drupal, the term "theme" means a collection of inter-related files that are responsible for the look and feel of a Drupal website. Other content management systems (CMS) use different names for the files that perform the same function in their particular systems the most common term used being "template."

There are a couple of different ways you can look at the function Drupal themes:

  • Expressed conceptually: A theme is a visual container that is used to format and display data on the screen

  • Expressed in terms of its component parts: A theme is a collection of files that format data into the presentation layer viewed by site visitors and system administrators

  • Expressed in simple terms: A theme determines how your site looks!

A theme contains many types of files that are familiar to web designers, including stylesheets, images, and JavaScript. A theme may also include some files whose extensions may not be so familiar, for example *.tpl.php files an extension that is used to designate template files that use the PHPTemplate theme engine supplied with Drupal. In later chapters, we will look at these files in detail.

Throughout this book, we will use "theme" to refer collectively to the files responsible for displaying the information on the page. We will use "template" to refer to a specific type of file found in themes, that is, the .tpl.php file.

Official Drupal online resources

Resource

URL

Main Drupal Site

http://drupal.org

Drupal Theme Development Forum

http://drupal.org/forum/3

Drupal Theming on IRC

IRC @ #drupal-themes

on the Freenode network

Download Extensions (including both Modules and Themes)

http://drupal.org/project

Drupal 7 Theme Guide

http://drupal.org/theme-guide

Theme Development Group on Drupal Groups

http://groups.drupal.org/theme-development

 

What is a theme engine?


A theme engine is a collection of scripts and files that interact with the CMS core and interpret the programming language used in the theme. There are several popular theme engines, each of which is designed to interpret different templating languages. Drupal is distributed with the PHPTemplate engine, which allows you to use template files written in PHP.

Note

Though PHPTemplate is currently distributed with the Drupal core, historically there were a variety of other theme engines that could also be installed and used with the Drupal system. Among the most popular were XTemplate, Smarty, and PHPTal. With the arrival of Drupal 6, the PHPTemplate engine was further integrated into the Drupal core. Today, it is hard to find a good reason to look for something other than the default PHPTemplate theme engine.

 

The range and flexibility of Drupal themes


What can be done with a Drupal theme? How much presentation flexibility does the system have? These are key questions that arise when evaluating Drupal for your project.

The themes included in the default distribution, while useful, don't really offer much in the way of variety. But don't let the default themes narrow your vision; the default themes are basic and are best viewed as simple examples or starting points for your theming efforts. The system is flexible enough to be used to create a wide variety of layout styles, from traditional portal layouts to more cutting edge sites.

The following screenshots show only a small sampling of the different layouts and design styles that can be created with Drupal. For a current list of some of the high profile sites using Drupal, view the case studies page on Drupal.org: http://drupal.org/cases.

When assessing a CMS, programmers and designers often have different agendas.

  • Programmers tend to focus on the development potential the system offers, that is, the underlying language and the ease of development. Programmers typically want to know: What can I do with it?

  • Designers, on the other hand, are typically more concerned with determining what conditions or restrictions a system imposes on their ability to design the interfaces desired by the client. Designers typically want to know: Does it limit my ability to design a site?

With Drupal, there is good news for both parties. For programmers, Drupal's extensive API and the reliance on the PHPTemplate engine means it is possible to tailor the output to match a wide variety of criteria. For designers, the flexibility of the Drupal approach to site building allows for the creation of attractive and brand-sensitive interfaces (not just a cookie-cutter portal or blog site).

The system offers the ability to create custom templates and to specify your modified files over the default files all without having to actually hack the Drupal core. While it may take a while for a newcomer to become comfortable with the Drupal approach to the presentation layer, it is worth the effort, as a little knowledge can go a long way towards allowing you to tailor the system's output to your specific needs.

Note

To get the most out of the Drupal theme system, it is necessary to have some fluency with PHP. Though you can do a lot with just the CSS and HTML elements, to access the more advanced functionality, you do need to be able to at least copy and modify basic PHP.

 

The output of a Drupal theme


When you visit a website powered by Drupal, what you see on the screen is the result of the site's active theme files. The theme's various files contain the functions that produce the data and also set the styling, position, and placement of the data on your screen. A lot of work for a small group of files.

When creating the theme, the designer designates areas inside the layout to fulfill various functions. For example, in a typical three-column theme, the center column is used to hold the primary content whereas the two smaller side columns contain secondary information. Screen space within each of those areas is also allocated according to the designer's priorities.

One of the key functions of the page template file in a Drupal theme is to provide placeholders for the elements on the page. The placeholders are called regions. A theme developer can insert the regions anywhere on the page by adding a short statement to the code of the appropriate file.

Note

Regions are created by placing simple, standardized PHP snippets inside the page template file. The PHP statement will automatically include the items assigned to the region. The region statement is typically wrapped with a div to allow you to control the placement of the region on the screen. Creating regions is discussed in detail in Chapter 5,

Regions are, in other words, placeholders inside the page layout where a site administrator can position functional output; this is most frequently done by assigning blocks to the region desired.

The exhibit below shows the default Drupal theme, Bartik, with the active regions highlighted. Sample content has been added to the site and several blocks have been enabled in order to show how the active regions are placed in the layout. It's important to note that while the region placement may be fixed in the layout, the regions themselves are fluid entities, able to expand or contract to suit their contents. Moreover, as Drupal does not limit the number of regions that you can use, the layout of a site is a blank canvas that can be controlled with great specificity.

Note

Note that Bartik actually has more than the four regions shown in the preceding screenshot, but since there is no output assigned to those regions they do not occupy any space on the screen. Typically, regions will collapse when empty, but this can be changed through the use of CSS to specify the size and placement of the region.

Wherever regions have been specified, the site administrator can assign module output. The following screenshot shows an edited view of the default Bartik theme, trimmed to highlight the region named Sidebar first and the blocks that are assigned to that region.

As regions must be coded into your theme files (they cannot be created from within the admin system), they are primarily the provenance of the theme developer. Blocks, on the other hand, can be created and manipulated by the site administrator from within the admin interface, without having to write any code.

Blocks can be created in two ways:

  • First, whenever the site administrator activates a module that produces visual output, one or more parallel blocks automatically become available. The administrator can then assign those blocks to the region where they want the output to appear.

  • Alternatively, the administrator can manually create and display a new block from within the Block Manager.

As each theme can have different region options, the Drupal system has a built-in tool that allows you to view the regions in the active theme. To see what regions are available in your theme, simply log in to the admin system and then select Structure from the Management menu at the top of the page. Next, click the option Blocks. Finally, click the link Demonstrate block regions and you will see something similar to what is shown in the following screenshot. Each of the regions is highlighted in yellow.

You can view the regions in your theme at any time from within the admin system. In this screenshot, you are looking at the regions in the Bartik theme.

 

The site administrator's view


Some of the big changes in Drupal 7 occurred in the administration system. In the past, Drupal used one theme for both the frontend (the public view) and the backend (the administrator view). Drupal 7 broke with the past, introducing not only a dedicated theme for site administration, but also two modules intended to make site administration easier.

The new admin theme is called Seven and is discussed below. The two new modules are the Toolbar module and the Overlay module. Both modules and the theme are enabled by default.

When the site administrator logs into the system, the frontend interface displays the Toolbar, as shown in the following screenshot. The Toolbar provides quick access to all the key administration functions, while remaining tucked away at the top of the page, conveniently within reach, but mostly out of the way.

  • Clicking on the links at the top portion of the Toolbar opens the admin overlay, shown in the following screenshot

  • Clicking on the Home icon closes the admin overlay and displays the home page showing the frontend theme

  • At the top right is a link that allows the user to log out of the system

  • The second row of buttons, shown in the light gray area of the Toolbar, is a collection of shortcut links

  • The administrator can add items to the shortcuts menu by clicking on the Add Shortcut icon, shown in the preceding screenshot

You can also click the Edit shortcuts link (seen on the right side of the page) to open an interface that allows you to manage all the shortcuts, or create new ones.

While no doubt many people will use the default configuration, you can also disable the Overlay module, using only the Seven theme in the normal window. The following image shows the Seven theme, without the Overlay.

Note

Alternative administration themes are available and can be easily added to the system. You can even create your own admin theme if you so desire. Adding new themes to the system is discussed in Chapter 2,

 

The default Drupal themes


There are several themes included in the default distribution of Drupal 7. The themes not only provide some basic variety in look and style but also can be used to help you understand how themes work in Drupal. By studying the default themes, you can learn from the functional examples they provide and you can see how various theming techniques have been implemented successfully.

To view the various themes, log in to your site as an administrator, and then click on the Appearance link on the Toolbar. The Theme Manager will appear in the Overlay, as shown in the following screenshot. The Theme Manager displays a list of all the themes installed on the system and provides access to the controls that allow you to enable, activate, and configure each of the themes.

There are four default themes included with Drupal 7:

  • Bartik

  • Garland

  • Seven

  • Stark

Of the four, Bartik and Garland are ready to use for the frontend of your Drupal site. Seven is intended for use an as administration theme. Stark is provided primarily as a tool to aid in the creation of new themes and, in its raw form, is not suitable for use on a site.

During the Drupal installation process, the system automatically assigns Bartik as the theme for all frontend pages and also sets Seven as the administration theme. You can change the settings and switch to any of the other themes easily by using the controls on the Theme Manager.

In the screenshots that follow, I show how each of the frontend themes appears with exactly the same content, blocks, and configuration.

Bartik

Bartik is the first theme you see when you install Drupal 7. The theme serves as the default frontend theme. The Bartik theme has several advantages that make it an attractive choice:

  • Flexible width that adjusts to the user's display

  • A very wide selection of regions 15 in total!

  • Supports one, two, or three-column layouts

  • Supports four-column area at the bottom of page

  • Easily configurable color scheme, via the Theme Manager

The Bartik theme is shown in the following screenshot:

Garland

Garland served as the default theme for Drupal until replaced by Bartik in Drupal 7. The Garland theme, however, continues to be distributed with Drupal. The theme has been tweaked a bit for Drupal 7, but remains visually the same as in previous Drupal releases. Garland supports a number of useful features:

  • The option to select either Flexible width that adjusts to the user's display, or Fixed width display

  • Six regions to choose from

  • Supports one, two, or three-column layout

  • Easily configurable color scheme, via the Theme Manager

The Garland theme is shown in the following screenshot:

Stark

Though Stark is not intended for use on a site in its raw form, a screenshot is given below, so you can see what it does. The theme is a tool. It is included to demonstrate the default HTML markup and CSS styles, and provides a reference point for your use when creating your own themes or working with the system styling.

Features of the Stark theme:

  • Flexible width that adjusts to the user's display

  • Seven regions to choose from

  • Supports one, two, or three-column layout

Strictly speaking, Stark is not a true theme, as it lacks a page.tpl.php file. The output you see on the screen is raw straight from PHPTemplate with only the system's default CSS styling applied.

To change themes, simply access the Theme Manager in the admin interface and click the link labeled Set default, which appears next to the theme you wish to activate. The default theme will be immediately visible once your choice has been saved.

Note

The default theme appears on all pages that are not specifically assigned to another theme.

As noted previously, Bartik, Garland, and Stark all support one, two, or three-column layouts. The way in which these themes are designed creates the flexibility in the layout. The site administrator can assign items to regions in the side columns, if so desired; the side columns only appear when items are assigned to that position. When items are not assigned to a side column, the theme automatically collapses the unused region. Assigning blocks to columns is discussed in the next chapter.

Note

Unlike Drupal 6, none of the themes included in Drupal 7 have sub-themes. Creating sub-themes does however, remain an option you can use. Sub-themes are discussed in Chapter 5,

 

Theme files


A diverse group of files work together to enable themes in Drupal. While the ones you need are kept in the themes directory, the theme engine and other helper files are located in a different place.

  • The core themes and their respective files are kept in the directory named /themes on your server.

  • The PHPTemplate engine files are located in the /engines sub-directory inside the /themes directory.

  • The html.tpl.php file is located in the /modules/system directory. This file is new in Drupal 7 and is used to provide header and doctype data used by all the themes.

Note

Note that although the directories containing the default themes are located inside /themes, if you create or install new themes, they should be placed in the /sites/all/ themes directory.

To view the theme and theme engine files in your Drupal installation, access your server and navigate to the directory located at /themes. As shown in the following screenshot, the structure is somewhat involved.

The themes included with Drupal 7 all use the PHPTemplate engine. Though it is possible to build themes without using PHPTemplate, given the degree in which the theme engine is integrated with the core, it is very hard to justify working without it.

The PHPTemplate-specific files all follow the same naming convention *.tpl.php. The prefix of each of those files is specific in that they are intended to override functions defined elsewhere. For the system to recognize that these files in the theme directory are intended to override the originals, the names must be consistent with the originals. The naming of some of the other theme files is flexible and within the discretion of the author.

To create a theme that uses the PHPTemplate theme engine, you need three files:

  • page.tpl.php: The file containing the regions and the key elements of the layout

  • style.css: The Cascading Style Sheet for the theme; this is needed only for styling unique to the theme

  • .info: This file sets a number of parameters for your theme, including the theme's name, description, and version information

Note

While it is not required for the theme to function, it is best practice to always include a thumbnail image of the theme. The thumbnail is used in the admin interface to provide site administrators with a preview of the installed themes. The guidelines for screenshots can be found at http://drupal.org/node/11637.

In addition to the basic required files, the theme author has the option to include additional files used to override the default styling, or to provide customizations relevant to specific pages or page elements. Overrides are not required and as the use of them is within the discretion of the theme developer, the presence and extent of the overrides inside any one theme will vary.

We will take an in-depth look at the various theme files and the concepts and rules relating to overrides in later chapters.

 

Summary


At the conclusion of this chapter, you should now have some familiarity with the big picture with the basic terminology used in Drupal, with the way Drupal presents data at runtime, with the general functions of themes, and with the location and nature of the key files and directories.

Despite the apparent complexity one sees at first glance, Drupal themes can be managed in a logical and relatively easy fashion by working with theme files (not hacking the core!) and through applying your own styling to intercept and override the default formatting of the Drupal system.

In the next chapter, we look at how you can install and configure themes and how the choices that you make can have a significant impact on the presentation layer of your site.

About the Author

  • Ric Shreves

    Ric Shreves is a web applications consultant and tech author. He’s been building websites since the mid-90s and writing about tech for almost as long. Ric specializes in open source content management systems and has written texts on each of the big three: WordPress, Joomla! and Drupal. Ric is the founding partner of water&stone, a digital agency that focuses on new media and online marketing. He works with clients on digital marketing strategy and supervises the SEO implementation team. Ric lives in Bali and divides his time between the island and Singapore.

    Browse publications by this author

Latest Reviews

(2 reviews total)
Everything was great - looking to add to my personal library for additional titles
The book seems like a good introduction (I'm only halfway through it). I thought that it would have been clearer to swap chapters 4 ("Intercepts and Overrides") and 5 ("Customizing an Existing theme") to avoid hacking existing themes and repeatedly telling the reader that "of course you should never do this." I think that most people will work by creating a sub-theme, so it makes sense to explain things in that context. Otherwise, as a semi-experienced Drupal developer, I'm finding it just what I need.