Drupal 6 Themes

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. The Elements of a Drupal Theme

About this book

Drupal is an award winning open source Content Management System (CMS). Based on PHP/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 the system's front and back-end interfaces.

Drupal 6 Themes is an ideal introduction to theming with Drupal 6. If you want to create a striking new look for your Drupal 6 website, this book is for you. This book is a revised, updated and expanded edition of Drupal 5 Themes, written specifically for Drupal 6. The book will show you techniques and tools to help you improve the look and feel of any Drupal 6-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, and also find invaluable information about under-documented elements of the theming system.

Publication date:
September 2008
Publisher
Packt
Pages
312
ISBN
9781847195661

 

Chapter 1. The Elements of a Drupal Theme

In this chapter, we will introduce the concept of themes and explain the key role that themes play in the Drupal system.

The chapter covers the various types of themes, the basic elements of a theme, and the functions those elements fulfil. 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 we can build the skills that follow in the subsequent chapters.

The Importance of Themes in Drupal

The theme of your Drupal site is responsible for the visitor's first impression of the site. Given the key role in shaping the presentation, a theme is arguably the most influential piece of your Drupal installation.

While the default Drupal distribution includes a set of themes that will prove sufficient for many users, I assume you are reading this book out of a desire to do more—whether it be only to install additional themes and then modify them to suit your needs, or whether you plan to build your own themes from scratch.

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

  1. 1. Theme it in Whole or in Part

  2. 2. Build with Blocks

  3. 3. Intercept and Override

Theme It in Whole or in Part

With Drupal, you can either set a single unified look for the entire site with a single template or you can control the look and feel of the individual parts of the site with multiple templates.

One source of confusion for many first time users of Drupal is that the default administrator interface is the same as the front-end interface seen by site visitors. Unlike other content management systems, there is not a purpose-built administration interface in Drupal.

Note

By setting the configuration within the admin interface, you can assign a specific theme to act as the interface for your administration system, however, this option is not active by default. Designating a separate admin theme is discussed in Chapter 8.

During the installation process, the system is configured to display the Garland template both for the front end (the public view) and the back end (the administrator's view). This is an example of using a single unified look for the entire site—the simplest approach to theming a Drupal site. If you want to work with just one template throughout the site, you can.

The seamless integration of the administrator interface into the site works well in some cases, but in others it may be problematic. There will be situations where the use of the same theme for the visitors and the administrators is undesirable, for example, on a marketing-oriented site where the artistic theme used for the site visitors may be impractical for site administrators.

The system's default use of the same page template for both the front end and the back end conceals the existence of a great deal of flexibility and makes it non-obvious that you can do more with the themes. That's the bad news. The good news is that you can do more—much more!

The Drupal system allows you to specify different templates for different purposes on your site. You can, for example, build one page template for your homepage, another for your interior pages, and yet another for your administrator's use. Indeed, not only can you specify different templates for different pages, but you can also specify different templates for different parts of the same page. The sky is the limit as the theme engine also gives you the ability to provide styling for specific types of content or for the output of a particular module. The control is highly granular and with a little practice (and a little ingenuity), you will find the system to be very flexible.

In the following chapters, we will look at how to implement multiple themes and how to theme and configure all the various constituent parts of the Drupal system. You can quite literally, theme it all!

Build with Blocks

The code of a Drupal theme includes placeholders called regions. The regions are areas in a page where content is typically displayed. The site administrator can assign a variety of output to the regions through the block manager in the admin interface.

Modules are one of the most common sources of output in the Drupal system. Modules are standalone bits of code—mini applications in some cases—that extend the functionality of your site. The default distro includes a large number of modules. It is through modules that Drupal provides functions like the Forum, the Aggregator, and even additional administrative power, like the Throttle module.

Some modules produce output that appears on the screen, for example, the Forum module produces a threaded discussions functionality with extensive output. Other modules simply add functionality, for example the Ping module, which notifies other sites or services when your content has changed. The administrator is able to toggle modules on or off and able to assign the output of those modules—called 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, if you so desire.

The process of activating modules and assigning blocks to regions on the pages is one of the most basic and most important skills for a site administrator. Understanding how to administer the system and what options are available is key to building interesting and usable sites. A great deal of flexibility can be squeezed out of the system in this area alone.

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 wish to install on your particular 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 this book.

Intercept and Override

The process of getting data from its raw form to its final displayed form provides several opportunities for you to affect the output prior to the data's arrival on the viewer's screen. While it is possible (even tempting!) to work at the lower levels—that is, hacking the files in the core files (or the modules or the theme engine)—I strongly advise against that. The recognized best practice approach to customizing themes emphasizes making changes at the higher levels, primarily to the theme files themselves.

The best practice approach to customizing themes involves intercepting and overriding files and styles—not altering the files in the Drupal core. In short, if you wish to style a particular block, instead of hacking the module that produces it, you will override the default module file with one of your own, or you will intercept the styles or functions of the module with those of your own (most likely, you will use a combination of both techniques). The new files and styles you create will be part of the theme itself—distinct from the core files.

By choosing to affect the system's output at the highest levels of Drupal's processes, 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 that is redundant with an existing file, function, or style and, courtesy of the order of precedence inherent in Drupal, the new file, function, or style will be in control. The use of intercepts and overrides to modify the look and feel of a Drupal theme is the subject of Chapter 5.

 

The Importance of Themes in Drupal


The theme of your Drupal site is responsible for the visitor's first impression of the site. Given the key role in shaping the presentation, a theme is arguably the most influential piece of your Drupal installation.

While the default Drupal distribution includes a set of themes that will prove sufficient for many users, I assume you are reading this book out of a desire to do more—whether it be only to install additional themes and then modify them to suit your needs, or whether you plan to build your own themes from scratch.

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

  1. 1. Theme it in Whole or in Part

  2. 2. Build with Blocks

  3. 3. Intercept and Override

Theme It in Whole or in Part

With Drupal, you can either set a single unified look for the entire site with a single template or you can control the look and feel of the individual parts of the site with multiple templates.

One source of confusion for many first time users of Drupal is that the default administrator interface is the same as the front-end interface seen by site visitors. Unlike other content management systems, there is not a purpose-built administration interface in Drupal.

Note

By setting the configuration within the admin interface, you can assign a specific theme to act as the interface for your administration system, however, this option is not active by default. Designating a separate admin theme is discussed in Chapter 8.

During the installation process, the system is configured to display the Garland template both for the front end (the public view) and the back end (the administrator's view). This is an example of using a single unified look for the entire site—the simplest approach to theming a Drupal site. If you want to work with just one template throughout the site, you can.

The seamless integration of the administrator interface into the site works well in some cases, but in others it may be problematic. There will be situations where the use of the same theme for the visitors and the administrators is undesirable, for example, on a marketing-oriented site where the artistic theme used for the site visitors may be impractical for site administrators.

The system's default use of the same page template for both the front end and the back end conceals the existence of a great deal of flexibility and makes it non-obvious that you can do more with the themes. That's the bad news. The good news is that you can do more—much more!

The Drupal system allows you to specify different templates for different purposes on your site. You can, for example, build one page template for your homepage, another for your interior pages, and yet another for your administrator's use. Indeed, not only can you specify different templates for different pages, but you can also specify different templates for different parts of the same page. The sky is the limit as the theme engine also gives you the ability to provide styling for specific types of content or for the output of a particular module. The control is highly granular and with a little practice (and a little ingenuity), you will find the system to be very flexible.

In the following chapters, we will look at how to implement multiple themes and how to theme and configure all the various constituent parts of the Drupal system. You can quite literally, theme it all!

Build with Blocks

The code of a Drupal theme includes placeholders called regions. The regions are areas in a page where content is typically displayed. The site administrator can assign a variety of output to the regions through the block manager in the admin interface.

Modules are one of the most common sources of output in the Drupal system. Modules are standalone bits of code—mini applications in some cases—that extend the functionality of your site. The default distro includes a large number of modules. It is through modules that Drupal provides functions like the Forum, the Aggregator, and even additional administrative power, like the Throttle module.

Some modules produce output that appears on the screen, for example, the Forum module produces a threaded discussions functionality with extensive output. Other modules simply add functionality, for example the Ping module, which notifies other sites or services when your content has changed. The administrator is able to toggle modules on or off and able to assign the output of those modules—called 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, if you so desire.

The process of activating modules and assigning blocks to regions on the pages is one of the most basic and most important skills for a site administrator. Understanding how to administer the system and what options are available is key to building interesting and usable sites. A great deal of flexibility can be squeezed out of the system in this area alone.

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 wish to install on your particular 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 this book.

Intercept and Override

The process of getting data from its raw form to its final displayed form provides several opportunities for you to affect the output prior to the data's arrival on the viewer's screen. While it is possible (even tempting!) to work at the lower levels—that is, hacking the files in the core files (or the modules or the theme engine)—I strongly advise against that. The recognized best practice approach to customizing themes emphasizes making changes at the higher levels, primarily to the theme files themselves.

The best practice approach to customizing themes involves intercepting and overriding files and styles—not altering the files in the Drupal core. In short, if you wish to style a particular block, instead of hacking the module that produces it, you will override the default module file with one of your own, or you will intercept the styles or functions of the module with those of your own (most likely, you will use a combination of both techniques). The new files and styles you create will be part of the theme itself—distinct from the core files.

By choosing to affect the system's output at the highest levels of Drupal's processes, 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 that is redundant with an existing file, function, or style and, courtesy of the order of precedence inherent in Drupal, the new file, function, or style will be in control. The use of intercepts and overrides to modify the look and feel of a Drupal theme is the subject of Chapter 5.

 

What Is a Theme?


In the context of Drupal, the term "theme" means a collection of interrelated files that are responsible for the look and feel of the 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"

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: The theme determines how your site looks!

A theme contains many 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 *.theme, or *.tpl.php files. The former is used by pure PHP themes; the latter extension appears in themes that employ the PHPTemplate theme engine bundled with Drupal. In later chapters, we will look at theme engines and their files in detail.

Throughout this book, we will use "theme" to refer to the collection of files responsible for displaying the information on the page. We will use "template" to refer to specific files of the theme, that is, the .tpl.php files.

Here are some of the official Drupal online resources:

Resource

URL

Main Drupal Site

http://www.drupal.org

Drupal Theming Forum

http://drupal.org/forum/3

Drupal Theming on IRC

IRC @ #drupal-themes on the Freenode network

Download Extensions

http://drupal.org/project

Drupal 6 Theme Guide

http://drupal.org/theme-guide

 

What Is a Theme Engine?


A theme engine is a collection of scripts and files that serve to interpret the programming language used and process the commands contained therein. As data is drawn from the database and from outside sources (if any), the theme engine plugs the data into a predetermined format for display.

There are several popular theme engines, each of which is designed to interpret different templating languages. Drupal is distributed with the PHPTemplate engine. PHPTemplate is popular for a variety of reasons, not the least of which being that the language it relies on is good old PHP—a preferred choice for many Web developers today.

Note

While PHPTemplate is 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 advent of Drupal 6, the PHPTemplate engine has been further integrated into the Drupal core and frankly it is hard to find a good reason to look for something other than the default theme engine. Alternative theme engines are discussed briefly in Chapter 3.

 

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 simple and are best viewed as basic 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.

Just a few examples of the layout variety that can be achieved with Drupal themes. 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 in terms of suitability for purpose, programmers and designers often have different agendas.

  • Programmers tend to focus on the development potential the system offers—the underlying language, the availability of hooks or the existence of tools, like theme engines.

  • Designers, on the other hand, are typically more concerned with determining what restrictions a system imposes on their ability to design the interfaces desired by their clients. Designers want to know: Is the system easy to theme? Is the presentation layer easily accessible?

With Drupal, there is good news for both parties. For programmers, the inclusion of the PHPTemplate engine in the Drupal distribution means it is possible to tailor the output to match a 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.

 

What You See on the Screen


When you access a Drupal website, what you see on the screen is the result of the site's active theme files. As the theme files call the functions that produce the data, the theme also sets the styling, the position, and the placement of the data on your screen. A lot of work for a small group of files….

Within a web page layout, a Drupal theme designer can designate certain general areas to fulfill certain functions. For example, in a typical 3-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.

Note

In Drupal, that main content area is called the Content Column and those columns on the side are known as Sidebars.

Drupal theme files segregate the elements on the page through the definition of markers called regions. A theme developer can place the regions anywhere on the page by adding a short statement to the code of the appropriate file.

The default Garland theme, showing hard-coded regions.

Note

Adding or modifying the regions in a theme is discussed in Chapter 3.

Wherever regions have been specified, the site administrator can then assign module output, which in Drupal-speak is called a block.

The Right Sidebar region of the Garland theme, showing sample block assignments. Note how the blocks are nested inside the region.

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 desired region.

Regions must be coded into your theme files and are, therefore, primarily the province 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 modify the code).

Blocks can be created in two fashions:

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

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

Regions that have no content assigned to them are inactive, but remain eligible for block assignment. Note in the illustration that the regions labeled Header, Left Sidebar, Right Sidebar, and Content all have output assigned to them. Those regions are active. The Footer region, in contrast, has no output assigned to it and is inactive on this particular page.

Note

Drupal themes can be created in a manner that allows inactive regions to be hidden from view—the Garland theme includes this feature. Where nothing is assigned to a left or right sidebar, the entire region collapses and hides from view.

To view the block placement in each of the default templates of your distro, log in to your Drupal site as an administrator and then go to Administer | Site building | Blocks. Click each of the themes' names to view the block placement, which will be overlaid on your screen.

 

The Big Picture: How Drupal Displays a Page


In order to appreciate the philosophy behind theming and the rationale for the approach to modifying and creating themes that is presented in this text, it is useful to see how Drupal functions at run time.

The shortest explanation of how a CMS functions can be expressed as follows: Text and pointers to other kinds of content are stored in the database; and that data is then dynamically retrieved, composed, and presented to a user in response to a request sent from a web browser. Drupal functions in the same manner, with the themes playing the crucial role in the formatting and presentation of the contents.

To illustrate the topic in more detail, consider the following:

The diagram shows a hierarchy, wherein the lowest level is the raw data and the highest level is the final output displayed on the page. The diagram also shows an order of precedence in which the items at the top of the hierarchy, nearest the browser, take precedence over items lower in the order.

By way of further explanation:

  1. 1. The data, for the most part, is stored in basic form in the database of your installation. Formatting, if any, is present only as HTML tags that may have been specified in the content by the author.

  2. 2. The first significant step on the way to output occurs when the Drupal core extracts and pre-processes the data. No real formatting occurs at this level. Any HTML formatting specified in items stored in the DB is simply passed through for interpretation by the browser.

  3. 3. The next step on the way to output sees the theme engine begin to assemble the core and module output into something close to final form.

  4. 4. The final step before output occurs when the theme-specific files process the data. This last stage can have a wide range of impacts, from minimal to very significant. The variance in impact depends on the extent to which the theme's author has provided specific directions for the formatting and whether the author has chosen to override the formatting of the theme engine or of the default stylesheets in the Drupal distro—all topics we will cover in depth later in this book.

 

The Default Themes of the Drupal Distro


The default distribution of Drupal comes with a variety of themes ready for use. The themes not only provide some basic variety in look and style but can also be used to help you understand how themes work in Drupal. By studying the themes in the distro, 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, then go to Administer | Site building | Themes. This is the theme manager page. On this page, you will see a list of the themes installed and the controls that allow you to enable, activate, and configure each of the themes.

There are six themes in the default distribution:

  • Bluemarine

  • Chameleon

  • Garland

  • Marvin

  • Minnelli

  • Pushbutton

Four of the themes employ the PHPTemplate engine; two, Chameleon and Marvin, do not. The default theme that is automatically selected during the installation process is Garland. You can switch to any of the other themes easily from within the administration interface.

To change themes, simply access the theme manager in the admin interface and click the Enabled checkbox next to the theme you wish to activate. Select the radio button control marked Default if you wish to set the theme as the default. (The default theme will appear on all pages that are not specifically assigned to another theme.) The default theme will be immediately visible once your choice has been saved.

The admin screen showing the theme manager (Administer | Site building | Themes) with its controls for enabling and configuring themes.

All six of the default themes can support either two or three column layouts, though in the default configuration you will see only two columns displayed. The way in which these themes are designed creates the flexibility in the layout. The site administrator can assign items to a third column if desired; the third column will only appear when items are assigned to that position. When items are not assigned to the third column, the theme automatically collapses the unused region to show only two columns. The assignment of items to those columns is discussed in the next chapter.

The themes also vary in their approach to accessibility issues. Bluemarine, Chameleon, Marvin, and Pushbutton employ tables in their layout. Garland and Minnelli are tableless and depend entirely upon CSS to place and control the elements on the page.

Note

Table-based layouts often make it difficult to create accessible web pages and their use is generally not preferred. If maximum accessibility is a consideration in your choice of themes, you should strive for layout using pure CSS.

The Drupal distribution also includes two examples of what are known as subthemes. Minnelli and Marvin are actually simple variations on other themes (specifically, Garland and Chameleon, respectively). Minnelli and Marvin are subthemes, that is, themes built on the same frameworks as their parents (note the visual similarity in the accompanying illustration). The subthemes are created by setting up alternative stylesheets inside the theme directory. While the subthemes use the same template files as their parents, the stylesheets use CSS to impart a different layout and a slightly different look. The presence of a dedicated style.css file in a subdirectory tells PHPTemplate to treat this as a separate theme, distinct from its parent.

 

The Theme Files


The themes and their respective files are kept in the directory named themes on your server. The default distro also comes bundled with the PHPTemplate engine. The PHPTemplate files are located in a sub directory inside the themes directory on your server.

Note

Note that although the default themes are located in the /themes directory, 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.

Screenshot of a section of the default Drupal directory structure on a server, showing the contents of the Themes directory.

The sample themes included in the distro demonstrate the two principal methods of creating themes. The themes Bluemarine, Garland, Minnelli, and Pushbutton all employ PHPTemplate. The themes Chameleon and Marvin are built without use of PHPTemplate; they are written directly in PHP. Themes that bypass the theme engine are sometimes referred to as "pure" PHP themes.

Should you use a theme engine or build a pure PHP theme? Which approach is better for you? It's hard to say; the answer varies from person to person and according to the intended use. The right answer will depend largely on your needs and your relative skill with the technologies. (Building a pure PHP theme can be a challenge for those who lack strong PHP skills!) Speaking generally, the theme engine approach is preferable as it is not only easier to master, but it is also more modular and reusable than a pure PHP approach to themes.

The Files of a PHPTemplate Theme

Let's look at the files of the default Bluemarine theme and their roles at run time:

File Name

Description

block.tpl.php

A template to define the appearance of the blocks on a page.

bluemarine.info

A key file that sets a number of parameters for your theme, including the theme's name, description, and version information.

box.tpl.php

A template used in this theme to define a specific format—a box used to frame things (like comments in the Bluemarine theme).

comment.tpl.php

A template to define the appearance of the comments that follow items.

logo.png

An image file containing the logo used in the theme.

node.tpl.php

A template to define the appearance of the nodes.

page.tpl.php

This template is the primary theme file; it is required by PHPTemplate theme and typically defines the appearance of most of the areas on any given page.

screenshot.png

An image file containing a screenshot of the theme; this is used as a reference.

style-rtl.css

The alternative stylesheet for this theme, for Right-To-Left oriented text.

style.css

The primary stylesheet for this theme.

Note that not all of these files are necessary for a PHPTemplate theme to function properly. The three key files are page.tpl.php, style.css, and bluemarine.info.

Note

While it is not necessary for the theme to function, it is best practice to always include screenshot.png, as this file 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

The file page.tpl.php does the heavy lifting in all PHPTemplate themes. The file incorporates, by reference, any theme-specific overrides contained in related files. In the case of the Bluemarine theme, those additional overrides are:

  • block.tpl.php

  • box.tpl.php

  • comment.tpl.php

  • node.tpl.php

Overrides are not required—the overrides in the Bluemarine theme represent a decision made by the author of the theme to style specific elements. As this is within the discretion of the theme developer, the presence and extent of overrides will vary from theme to theme.

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.

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

The Files of a Pure PHP Theme

Let's look at the files that comprise the Chameleon theme and their roles at run time.

File Name

Description

background.png

An image fi le used as a page background.

chameleon.info

Sets a number of parameters associated with the theme, including the theme's name, description, and version information.

chameleon.theme

This is the primary theme file. This is the only required file in a pure PHP theme and it defines the appearance of the page.

common-rtl.css

An alternative stylesheet for this theme to handle Right-To-Left oriented text.

common.css

The stylesheet that covers the common Drupal elements in this theme.

logo.png

An image fi le containing the logo used in the theme.

style-rtl.css

An alternative stylesheet to set spacing in Right-To-Left orientation

style.css

The stylesheet that covers the theme-specifi c elements in this theme.

In this theme, the key files are chameleon.theme, common.css, style.css, and chameleon.info. The *.theme file uses PHP statements to manage the page elements. The *.css files contain the styles necessary to support the presentation of those elements.

We will examine pure PHP themes in more detail in later chapters.

 

Summary


This chapter lays the groundwork for what comes ahead. 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, theme engines, and stylesheets, as well as with the location and nature of the key files and directories.

You should also be aware that 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.

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
Book Title
Access this book, plus 7,500 other titles for FREE
Access now