Modifying an Existing Theme in Drupal 6: Part 1

Exclusive offer: get 50% off this eBook here
Drupal 6 Themes

Drupal 6 Themes — Save 50%

Create new themes for your Drupal 6 site with clean layout and powerful CSS styling

$23.99    $12.00
by Ric Shreves | August 2009 | Drupal Open Source

In this two-part article by Ric Shreves, we will put together the various techniques and demonstrate how to modify and heavily customize an existing theme.

The majority of people who set out to master Drupal theming start out by modifying existing themes and learning from the process; that's exactly what we're going to do in this article. We will take an existing theme, look at how it works, then copy it and modify it until we have a very different looking theme. In this case, we will be building a basic fixed width, CSS-based, personal blog theme.

For the purpose of illustrating the examples in this article, we start with the Zen theme, which you can download from the Drupal site.

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:
  4. .engine
    .info
    .module
    .install
    .theme
  5. 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.

Modifying an Existing Theme in Drupal 6: Part 1

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.

Drupal 6 Themes Create new themes for your Drupal 6 site with clean layout and powerful CSS styling
Published: September 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Setting Global and Theme configuration options

Navigate to the site information screen (Administer | Site configuration | Site information). Rename the site from Drupal to Tao and then let's add a slogan: A fixed width blog theme based on Zen. Save the configuration.

Next, let's deal with the theme-specific configuration settings relevant to our new subtheme Tao. Go to Administer | Site building | Themes and click the configure link for the Tao theme. Enable the Site slogan and the Search box. While you're there, disable the Mission statement, the Logo, and the Shortcut icon options; we won't be needing those features. Save your changes.

Setting user access

We now need to set the user permissions so that our site visitors can see and use the various functionalities we've set up.

Go to the Permissions interface (Administer | User management | Permissions) and enable the following for anonymous user access:

  • Access comments
  • Post comments
  • Access site-wide contact form
  • Search content

Save your new permissions and let's move on to the next step in our preliminary preparations.

Creating dummy content

Temporary dummy content allows us to see text on the screen as we make our changes, and helps us to judge more easily our fonts, colors, spacing, and margins.

First, let's create a new page. Name it About Us and throw in a few lines of placeholder text. Add it to the Navigation menu by clicking on the Menu settings link on page creation screen. Set the Menu link title to About Us and Save your new page.

Next, let's create a couple of blog entries. Go to Administer | Create content | Create Blog entry and add two or three pages of dummy text.

We also have a forum to integrate, so we need some sample content. Access the Forums option under Content management. You will see there a message advising you that you need to create a new forum in order to fully activate this module. Let's add a new forum and name it simply New. This is sufficient for our needs at this stage.

Finally, let's create a site wide contact form. To set up your first contact form, go to Administer | Site building | Contact form and click on the Add category tab. Give the category a name, like website feedback, then add one or more email addresses for the form's intended recipient(s). On the same page, change the value for Selected to yes, then save your work.

Now that we have our modules, some content, a forum, and a contact form in place, it's time to set up the remaining menu choices to connect these items to the navigation.

Auto-Generate your dummy content

While in the example I have set up content manually, there is a faster way. If you have installed the Devel module, you can use it to automatically populate your site with sample data. This is a brilliant little utility that saves time and frustration. When you install the Devel module, enable the option Devel generate. Now, when you need sample content, visit the main administration page and look for the heading Generate items. Select what you want from the list. Simple, fast, painless—another reason why we love the Devel module.

Setting up menus

For this theme, we're going to use the following configuration for the theme's menus:

  • Drupal's default Navigation menu will hold the site's main navigation items and we're going to assign that to the righthand side of the page.
  • We will manually manage the placement of the Primary Links menu, placing it at the top of the page inside a new region where it will hold our secondary navigation choices.
  • We'll create a footer navigation menu and place that at the bottom of the page. The footer nav will hold secondary menu choices as well as our login/logout link.

To set this up, access the menu manager (Administer | Site building | Menus) and make the changes outlined below.

For the Navigation menu, make sure the following are enabled (but do not disable the default choices you will see on this menu!):

Drupal 6 Themes Create new themes for your Drupal 6 site with clean layout and powerful CSS styling
Published: September 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Name for Link

Path (URL)

Blogs

blog

The Forum

forum

About Us

(link determined by system

when you create the page)

 

 

Note that you should already have an About Us link on the Navigation menu, courtesy of the steps we took when we created the About Us page, in the previous section of this article.

For the Primary Links menu, we will need to set up the following:

Name for Link

Path (URL)

Home

<front>

Contact Us

Contact

Note that there's an easy shortcut to place the contact form link on the primary nav: When we created the contact form earlier in this article, Drupal automatically made a link to the form. The default contact link is on the Navigation menu, so let's just edit that to get it to appear on our Primary links menu.

Go to the Navigation menu (Administer | Site building | Menus | Navigation), locate the menu item Contact, and click the Edit button. On the resulting page, change the setting for the field Parent item to Primary Links, check the Enable option, and then Save. The link to the contact form will now appear on your Primary links.

The last step for preparing the Primary links nav is to disable the automatic management feature in Drupal. We want to place this menu manually by assigning the Primary links block to one of the new custom regions we will create in the next section. To disable the default placement, go to the Menu manager (Administer | Site building | Menus) and select the Settings tab. On the settings page, change Source for the primary links: to No primary links.

In our design, the plan was to mirror the navigation at the top of the page in the navigation at the bottom (in the footer). Placing menu items on the footer requires an additional step—we have to first create a menu to hold the items.

To set up our footer nav menu, go to the menu manager (Administer | Site building | Menus) and select the Add menu tab. Drupal requires us to add both a Menu name and a Title. The menu name is used by the system, while the title is what we'll actually be dealing with on the site. The menu name has to be machine readable, hence it must contain only lowercase letters, numbers or hyphens, and it must be unique; the title field is more forgiving and isn't burdened by these restrictions. Let's give our new menu the name footer and the title Footer Nav. Once you've added both these fields, click Save. Next, let's set up the menu items we want on our new footer nav:

Name for Link

Path (URL)

Home

<front>

Login

user

Contact Us

contact

Adding new regions

The Tao theme design requires the addition of a horizontal navigation menu that hangs from the top of the page and the ability to insert banner ads at the top of the page. As these areas of the page are planned to be distinct in their usage and in their formatting, it is probably best to create new regions to hold these items.

To provide space for our requirements, we will be adding two new regions, which we shall call page_top and banner. Before we go any further with the configuration, we need to create these regions so that they are available for block placement.

Adding new regions to a theme is a two-step process: You must modify the theme's .info file to list the new regions and then you must place the code that includes the regions into the theme's page.tpl.php file.

Traditionally, Drupal themes include the following regions, though individual themes are free to vary from this list if they wish to offer additional (or fewer) regions:

  • left
  • right
  • content
  • header
  • footer

Zen, and by inheritance Tao, varies from the default list of regions. These themes include the following regions:

  • left sidebar
  • right sidebar
  • navigation bar
  • content top
  • content bottom
  • header
  • footer
  • closure

Here is an unaltered snippet of code from our tao.info file, which shows the regions initially available in this theme:

regions[left] = left sidebar
regions[right] = right sidebar
regions[navbar] = navigation bar
regions[content_top] = content top
regions[content_bottom] = content bottom
regions[header] = header
regions[footer] = footer
regions[closure_region] = closure

The syntax for the regions statement in the .info file works like this:

regions[machine_readable_name_for_region] = name to
display to user

We need to add two regions to this list, so let's open the file tao/tao.info with your editor of choice. Add in our two new regions, page_top and banner as follows:


regions[page_top] = page top
regions[banner] = banner
regions[right] = right sidebar
regions[navbar] = navigation bar
regions[content_top] = content top
regions[content_bottom] = content bottom
regions[header] = header
regions[footer] = footer
regions[closure_region] = closure

Save the file to conclude the first part of this task.

Note that the contents of the .info file are stored in the database by Drupal and are subject to caching. To see your changes immediately, you will need to clear the cache. To do so quickly and easily, use the clear cached data button located at Administrator | Site configuration | Performance.

The second step is to place the code that produces the regions into the page.tpl.php file. For Tao, the plan is to use the region page top to hold the primary links nav that hangs from the top of each page. The banner region is to be placed below the new page top region and above the existing header region, and will be used to hold our banner ads.

The first thing we need to do is create our own page.tpl.php file. To do this, simply copy the page.tpl.php file of the underlying Zen theme (zen/zen/page.tpl.php) and place it in the Tao directory. We will make our changes on the file tao/page.tpl.php.

Open Tao's page.tpl.php file. Note the following code, immediately after the head of the document:


<body class="<?php print $body_classes; ?>">
<div id="page"><div id="page-inner">
<a name="top" id="navigation-top"></a>
<div id="skip-to-nav"><a href="#navigation">
<?php print t('Skip to Navigation'); ?></a></div>

We're going to modify that to include our two new regions, as follows:

<body class="<?php print $body_classes; ?>">
<div id="page"><div id="page-inner">
<div id="page-top"><?php print $page_top; ?></div>
<div id="banner"><?php print $banner; ?></div>

Note that I have wrapped both the statements that include the new regions with divs. To make them easy to remember, let's name the id of each div to match the region. When we modify the CSS later, we will define these new divs to set the position and formatting of the contents of these regions.

While you have this file open, go ahead and delete or comment out the code that immediately follows our new region, as we won't be needing this:

<a name="top" id="navigation-top"></a>
<div id="skip-to-nav"><a href="#navigation">
<?php print t('Skip to Navigation'); ?></a></div>

Enabling and configuring blocks

Let's enable the blocks we need so we can get the output on the screen. Assign the blocks Recent comments, Syndicate, and Who's online to the region Right sidebar. Put them in whatever order you like.

The Navigation block currently appears in the left sidebar. We need to move the block to the right sidebar, where it will sit at the top of the column.

Let's also enable the Footer Nav block by placing it in the footer region and the Primary Links block by placing it in the page top region. Save your changes.

While you're here, hide some of the block titles that we don't want to see on the page. Open the configure dialog for the Syndicate block and set the Block title to <none>. Do the same with the Primary Links, Footer, and Navigation blocks. Save your changes.

One of the requirements for this theme was the provision of space for a banner ad at the top of the pages. While normally you might want to use a dedicated extension to handle ads, for our example we're going to set up the banner the crude way—that is, we're going to create a block for the banner, then hard-code the location of the banner image into the block.

To provide a dummy banner image for us to work with, I downloaded a sample leaderboard-sized ad and then placed it inside our theme folder, in the new directory images. I will link to the sample banner image for testing purposes. Later, the user can either employ this banner block or they can find an alternative approach for placing a banner in this position. Either way, the styling will be in place and the site ready to accommodate the ads.

The Internet Advertising Bureau maintains an online collection of sample ad units in various official sizes; this is a good resource for placeholders, like the one used in this example. For our Tao theme, I have downloaded the sample Full Leaderboard ad unit (728 x 90 pixels) from: http://www.iab.net/iab_products_and_industry_services/1421/1443/Ad_Unit.

To create our new block, access the block manager and choose Add Block. Set the block description to Banner. Next, insert a link to the banner image in the Block body text field, as follows:

<a href="#" ><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="//dgdsbygo8mp3h.cloudfront.net/sites/all/themes/
tao/images/726x90_v2.gif"/></a>

Set your input format to Full HTML, set the Block title field to <none>, and then finally choose Save block. Assign this block to the region banner to complete this operation.

Finally, let's hide two of the default blocks we won't need. Since we added a link to the login function to the footer nav created earlier, let's hide the display of the User login block to keep our screen clear of clutter. To do this, find the User login block in the block manager and set the region for the block to <none>. Finally, let's hide the Powered by Drupal block as well. Save your changes and we have finished this task.

If this were a production site, rather than a basic demo, I would approach the actual banner management in a different fashion: If I were using Google AdSense on the site, I would use the Block body field to input my AdSense code. If, on the other hand, I needed more complete banner management functionality, such as the ability to run my own ads, control display, and generate reports, I would install a third-party extension and follow its instructions for implementing the block. A number of extensions provide extended ad management functionality, see http://drupal.org/project/Modules/category/55 for a list.

At the conclusion of the process above, your block assignments will look like this:

Name for Block

Region

Primary Links

page top

Banner

banner

Navigation

right sidebar

Recent Comments

right sidebar

Who's Online

right sidebar

Syndicate

right sidebar

Footer Nav

footer

At this point in the process, we have all the basics in place. The system is set up with the basic configuration and the new regions in place. The various modules are enabled, the menus populated, and the output blocks positioned as we want them to be in the final site. While visually the site is a bit of a mess, all the elements are visible and that means we can start on the CSS and the particular customizations required to achieve our final design.

>> Continue Reading Modifying an Existing Theme in Drupal 6: Part 2

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.

Books From Packt

Drupal 6 Site Blueprints
Drupal 6 Site Blueprints

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Expert Cube Development with Microsoft SQL Server 2008 Analysis Services
Expert Cube Development with Microsoft SQL Server 2008 Analysis Services

Asterisk 1.4 – the Professional’s Guide
Asterisk 1.4 – the Professional’s Guide

LWUIT 1.1 for Java ME Developers
LWUIT 1.1 for Java ME Developers

Drupal 6 Content Administration
Drupal 6 Content Administration

Flash with Drupal
Flash with Drupal

 

No votes yet
Good job by
Your article is very good yet little short. I hope you next articles could be little more elaborate that this one. Still good job.
Very worthwhile reading by
Thank you that answered many questions I have been struggling to find answers to for a while.
That was a really interesting by
That was a really interesting read about Modifying an Existing Theme in Drupal 6: Part 1 | Packt Publishing

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
3
a
6
v
t
V
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software