Setting up the workspace

There are several software tools that can make your work modifying themes more efficient. Though no specific tools are required to work with Drupal themes, there are a couple of applications that you might want to consider adding to your tool kit.

I work with Firefox as my primary browser, principally due to the fact that I can add into Firefox various extensions that make my life easier. The Web Developer extension, for example, is hugely helpful when dealing with CSS and related issues. I recommend the combination of Firefox and the Web Developer extension to anyone working with Drupal themes. Another extension popular with many developers is Firebug, which is very similar to the Web Developer extension, and indeed more powerful in several regards.

Pick up Web Developer, Firebug, and other popular Firefox add-ons at https://addons.mozilla.org/en-US/firefox/

When it comes to working with PHP files and the various theme files, you will need an editor. The most popular application is probably Dreamweaver, from Adobe, although any editor that has syntax highlighting would work well too. I use Dreamweaver as it helps me manage multiple projects and provides a number of features that make working with code easier (particularly for designers).

If you choose to use Dreamweaver, you will want to tailor the program a little bit to make it easier to work with Drupal theme files. Specifically, you should configure the application preferences to open and edit the various types of files common to PHPTemplate themes. To set this up, open Dreamweaver, then:

1. Go to the Preferences dialogue.
2. Open file types/editors.
3. Add the following list of file types to Dreamweaver’s open in code view field:

.engine
.info
.module
.install
.theme

4. Save the changes and exit.

With these changes, your Dreamweaver application should be able to open and edit all the various PHPTemplate theme files.

Previewing your work

Note that, as a practical matter, previewing Drupal themes requires the use of a server. Themes are really difficult to preview (with any accuracy) without a server environment. A quick solution to this problem is the XAMPP package. XAMPP provides a one step installer containing everything you need to set up a server environment on your local machine (Apache, MySQL, PHP, phpMyAdmin, and more). Visit http://www.ApacheFriends.org to download XAMPP and you can have your own Dev Server quickly and easily.

Another tool that should be on the top of your list is the Theme developer extension for the popular Drupal Devel module. Theme developer can save you untold hours of digging around trying to find the right function or template. When the module is active, all you need to do is click on an element and the Theme developer pop-up window will show you what is generating the element, along with other useful information. In the example later in this article, we will also use another feature of the Devel module, that is, the ability to automatically generate sample content for your site.

You can download Theme developer as part of the Devel project at Drupal.org: http://drupal.org/project/devel

Note that Theme developer only works on Drupal 6 and due to the way it functions, is only suitable for use in a development environment—you don’t want this installed on a client’s public site!

Visit http://drupal.org/node/209561 for more information on the Theme developer aspects of the Devel module. The article includes links to a screencast showing the module in action—a good quick start and a solid help in grasping what this useful tool can do.

Planning the modifications

We’re going to base our work on the popular Zen theme. We’ll take Zen, create a new subtheme, and then modify the subtheme until we reach our final goal. Let’s call our new theme “Tao”.

The Zen theme was chosen for this exercise because it has a great deal of flexibility. It is a good solid place to start if you wish to build a CSS-based theme. The present version of Zen even comes with a generic subtheme (named “STARTERKIT”) designed specifically for themers who wish to take a basic theme and customize it. We’ll use the Starterkit subtheme as the way forward in the steps that follow.

The Zen theme is one of the most active theme development projects. Updated versions of the theme are released regularly. We used version 6.x-1.0-beta2 for the examples in this article. Though that version was current at the time this text was prepared, it is unlikely to be current at the time you read this. To avoid difficulties, we have placed a copy of the files used in this article in the software archive that is provided on the Packt website. Download the files used in this article at http://www.packtpub.com/files/code/5661_Code.zip. You can download the current version of Zen at http://drupal.org/project/zen.

Any time you set off down the path of transforming an existing theme into something new, you need to spend some time planning. The principle here is the same as in many other areas of life: A little time spent planning at the front end of a project can pay off big in savings later.

A proper dissertation on site planning and usability is beyond the scope of this article; so for our purposes let us focus on defining some loose goals and then work towards satisfying a specific wish list for the final site functionality.

Our goal is to create a two-column blog-type theme with solid usability and good branding. Our hypothetical client for this project needs space for advertising and a top banner. The theme must also integrate a forum and a user comments functionality.

Specific changes we want to implement include:

• Main navigation menu in the right column
• Secondary navigation mirrored at the top and bottom of each page
• A top banner space below top nav but above the branding area
• Color scheme and fonts to match brand identity
• Enable and integrate the Drupal blog, forum, and comments modules

In order to make the example easier to follow and to avoid the need to install a variety of third-party extensions, the modifications we will make in this article will be done using only the default components—excepting only the theme itself, Zen. Arguably, were you building a site like this for deployment in the real world (rather than simply for skills development) you might wish to consider implementing one or more specialized third-party extensions to handle certain tasks.

Creating a new subtheme

Install the Zen theme if you have not done so before now; once that is done we’re ready to create a new subtheme.

First, make a copy of the directory named STARTERKIT and place the copied files into the directory sites/all/themes. Rename the directory “tao”.

Note that in Drupal 5.x, subthemes were kept in the same directory as the parent theme, but for Drupal 6.x this is no longer the case. Subthemes should now be placed in their own directory inside the sites/all/themes/directory.

Note that the authors of Zen have chosen to vary from the default stylesheet naming. Most themes use a file named style.css for their primary CSS. In Zen, however, the file is named zen.css. We need to grab that file and incorporate it into Tao.

Copy the Zen CSS (zen/zen/zen.css) file. Rename it tao.css and place it in the Tao directory (tao/tao.css).

When you look in the zen/zen directory, in addition to the key zen.css file, you will note the presence of a number of other CSS files. We need not concern ourselves with the other CSS files. The styles contained in those stylesheets will remain available to us (we inherit them as Zen is our base theme) and if we need to alter them, we can override the selectors as needed via our new tao.css file.

In addition to renaming the theme directory, we also need to rename any other theme-name-specific files or functions. Do the following:

• Rename the STARTERKIT.info file to tao.info.
• Edit the tao.info file to replace all occurrences of STARTERKIT with tao.
• Open the tao.info file and find this copy: The name and description of the theme used on the admin/build/themes page. name = Zen Themer’s StarterKit description = Read the <a href=”http://drupal.org/node/226507″>online docs</a> on how to create a sub-theme.
• Replace that text with this copy: The name and description of the theme used on the admin/build/themes page. name = Tao description = A 2-column fixed-width sub-theme based on Zen. Make sure the name= and description = content is not commented out, else it will not register.
• Edit the template.php file to replace all occurrences of STARTERKIT with tao.
• Edit the theme-settings.php file to replace all occurrences of STARTERKIT with tao.
• Copy the file zen/layout-fixed.css and place it in the tao directory, creating tao/layout-fixed.css.
• Include the new layout-fixed.css by modifying the tao.info file. Change style sheets[all][] = layout.css to style sheets[all][] = layout-fixed.css.

The .info file functions similar to a .ini file: It provides configuration information, in this case, for your theme. A good discussion of the options available within the .info file can be found on the Drupal.org site at: http://drupal.org/node/171205

Making the transition from Zen to Tao

The process of transforming an existing theme into something new consists of a set of tasks that can categorized into three groups:

1. Configuring the Theme
2. Adapting the CSS
3. Adapting the Templates & Themable Functions

Configuring the theme

As stated previously, the goal of this redesign is to create a blog theme with solid usability and a clean look and feel. The resulting site will need to support forums and comments and will need advertising space.

Let’s start by enabling the functionality we need and then we can drop in some sample contents. Technically speaking, adding sample content is not 100% necessary, but practically speaking, it is extremely useful; let’s see the impact of our work with the CSS, the templates, and the themable functions.

Before we begin, enable your new theme, if you have not done so already. Log in as the administrator, then go to the themes manager (Administer | Site building | Themes), and enable the theme Tao. Set it to be the default theme and save the changes.

Now we’re set to begin customizing this theme, first through the Drupal system’s default configuration options, and then through our custom styling.

Enabling Modules

To meet the client’s functional requirements, we need to activate several features of Drupal which, although contained in the default distro, are not by default activated. Accordingly, we need to identify the necessary modules and enable them. Let’s do that now.

Access the module manager screen (Administer | Site building | Modules), and enable the following modules:

• Blog (enables blog-type presentation of content)
• Contact (enables the site contact forms)
• Forum (enables the threaded discussion forum)
• Search (enables users to search the site)

Save your changes and let’s move on to the next step in the configuration process.