Creating Custom Themes and Zen in Drupal 6

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

Drupal 6 Theming Cookbook — Save 50%

Over 100 clear step-by-step recipes to create powerful, great-looking Drupal themes

$26.99    $13.50
by Karthik Kumar | December 2010 | Content Management Drupal Open Source

Themes are among the most powerful and flexible features available when it comes to the presentation of a website. The greatest strength of Drupal lies in its design which, when done correctly, allows developers and designers to customize and micromanage each and every aspect of the site.

In this article by Karthik Kumar, author of the book Drupal 6 Theming Cookbook, we will be covering the following recipes:

  • Clearing the theme registry
  • Creating a theme from scratch
  • Creating myzen, a Zen-based theme
  • Choosing a CSS layout for myzen
  • Overriding Zen template files with myzen
  • Adding a custom region to myzen
  • Adding a background image to the theme
  • Adding a conditional stylesheet in Zen
  • Modifying myzen's theme settings

Drupal 6 Theming Cookbook

Drupal 6 Theming Cookbook

Over 100 clear step-by-step recipes to create powerful, great-looking Drupal themes

  • Take control of the look and feel of your Drupal website
  • Tips and tricks to get the most out of Drupal's theming system
  • Learn how to customize existing themes and create unique themes from scratch
  • Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible
        Read more about this book      

(For more resources on Drupal, see here.)

Introduction

Sub-themes of core and contributed themes are convenient and efficient in modifying and reusing elements of their base themes, circumstances often require a completely unique approach specific to our site. Custom themes are the solution for websites which demand a fresh look, using complex layouts, or need so much customization that it would be prudent to start with a clean slate.

Custom themes are the equivalent of handcrafted pieces of art as the themer controls every piece of the puzzle from a design or implementational point of view. This includes setting up the theme using .info files, choosing the layout, implementing it in a page template, adding regions, styling nodes using node templates, blocks using block templates, and so on. But over time, developers have identified a list of common tasks, characteristic layouts, and file and folder hierarchies which are logical, efficient, and promote reuse. This has evolved into what have been dubbed starter themes, themes upon which custom themes are built, usually as sub-themes.

The most popular starter theme for Drupal is Zen. As advertised on its project page, the Zen theme is a flexible standards-compliant and semantically correct XHTML theme that can be highly modified through CSS and an enhanced version of Drupal's template system. It is designed in modular fashion making it straightforward to change layouts, override templates and theme functions, and to add or remove features. Additionally, the Zen theme comes with extensive documentation within each file which make things all the more convenient.

With respect to CSS, Zen maintains a number of well documented CSS files segregated by functionality or location. For example, layout rules are contained within a dedicated layout.css (or similar) file and page backgrounds are styled within page-backgrounds.css and so on. This makes it convenient when it comes to managing and tracking code changes.

A Zen-based theme contains the following file and folder structure:

File/folder name

Purpose

template.php

A file where theme overrides and other theme and engine-related code is placed.

theme-settings.php

A file where settings particular to a theme can be placed. These settings are usually exposed on the theme's configuration page.

css/

A folder to store stylesheets.

images/

A folder to store images used in the theme.

images-source/

The folder where the source files for the optimized images in the images folder are available.

js/

A folder to store JavaScript files.

templates/

A folder where tpl.php template files are to be placed.

There are a number of other starter themes available on drupal.org. Some of the more popular ones include Fusion (http://drupal.org/project/fusion), Blueprint (http://drupal.org/project/blueprint), Ninesixty (http://drupal.org/ project/ninesixty), and Adaptivetheme (http://drupal.org/project/ adaptivetheme). We will be looking only at the Zen starter theme in this article.

Clearing the theme registry

Before we begin, we need to familiarize ourselves with a seemingly trivial yet crucial task that needs to be performed on a routine basis during theme development—clearing the theme registry. The theme registry is essentially a table that Drupal uses to list and track the files and features of a theme, as well as the theme functions which are being exposed by modules and the theme itself.

While it is recommended practice to turn on Drupal's cache feature only for production sites, the theme registry is built and cached regardless of other caching options. As a result, any changes that affect the structure of the theme will necessitate the clearing of the theme registry.

Getting ready

Rebuilding the registry is an intensive operation which is required only when changes have been made to the theme's files.

How to do it...

There are a number of ways of clearing the registry. In a stock Drupal installation, visiting admin/settings/performance (Home | Administer | Site configuration | Performance) and clicking on the Clear cached data button will clear all cached data, including the registry, and force a rebuild.

A shortcut
It is sometimes handy to know that the cache and registry can also be cleared by visiting admin/build/themes (Home | Administer | Site building | Themes) and just clicking the Save configuration button.

However, during development or debugging, we will want to clear the registry with great regularity. Rather than having to do so manually, it is often handy to be able to instruct Drupal to perform this operation automatically on every page load. Some themes, including the Zen-based theme which we will be familiarizing ourselves with later in this article, offer an option on their configuration pages to rebuild the registry on every page load. While this is certainly convenient, the recommended method of managing this and other development-oriented operations is through the use of the Devel module.

As the name suggests, the Devel module is one which is tailor-made for use during development. It can be downloaded from http://drupal.org/project/devel. Once the module has been downloaded and installed, navigate to admin/settings/devel (Home | Administer | Site configuration | Devel settings) where the option to Rebuild the theme registry on every page load can be enabled.

How it works...

Drupal maintains a cache of all .info files, template files, and theme functions in the theme registry. This registry is a part of the cache table in the Drupal database. When we click on the Clear cache data button in the performance settings page, all Drupal is doing is clearing this entry in the cache table, which automatically forces a rebuild of the registry. The Devel module does the same thing when the Rebuild the theme registry on every page load setting is enabled, except that it does this automatically on every page view.

It is important to keep in mind that rebuilding the registry, or for that matter, clearing any of the caches is an expensive operation which adversely affects the performance of the site. Therefore, it is recommended that this setting only be enabled during development and not in production sites.

Clearing the registry is an important factor to keep in mind during development and especially during debugging.

There's more...

The Devel module also provides a block with handy shortcuts to oft-used areas of the site.

Clearing the cache using the Development block

The Devel module provides a Development block which can be enabled via the block management page at admin/build/blocks (Home | Administer | Site building | Blocks). Once enabled, the block lists, as in the following screenshot, a number of links to perform operations such as emptying the Drupal cache, rebuilding the menu cache, and even reinstalling modules. Emptying the cache will also force a rebuild of the theme registry.

Creating Custom Themes and Zen in Drupal 6

Creating a theme from scratch

While we have previously looked at installing contributed themes and extending base themes using sub-themes, this recipe will outline the steps required to create a custom theme.

Getting ready

It is assumed that the sites/all/themes folder has already been created. This is the recommended location to place custom and contributed themes.

How to do it...

While creating a brand new custom theme, files such as page.tpl.php will need to be explicitly defined and there is no base theme.

  1. Create a folder with the new theme's name inside the sites/all/themes folder.
    In this example, we are going to call our theme mytheme.
  2. Create a file named mytheme.info and open it in an editor.
  3. Add details about the theme as follows:

    name = My theme
    description = My custom theme
    core = 6.x
    engine = phptemplate

  4. Save the file.
  5. Visit the theme administration page at admin/build/themes (Home | Administer | Site building | Themes) and we should be able to see a new entry for our theme.

    Creating Custom Themes and Zen in Drupal 6

  6. Enable the theme by checking its Enabled checkbox.
  7. Also, set it as the default theme by selecting its Default radio button.
  8. Click the Save configuration button at the bottom of the page to save the changes.

How it works...

Just as with other themes, Drupal scans the sites/all/themes folder looking for .info files which indicate the presence of a theme. Seeing mytheme.info, it parses the file and loads the details of the theme, and saves them in the database.

When the new theme is enabled, what we will see is largely unstyled content not unlike the following screenshot. The problem here is that we have not specified any CSS stylesheets to ay out the page. The only styles being loaded are those that are module-specific as opposed o theme-specific.

Creating Custom Themes and Zen in Drupal 6

The styles being used in the preceding screenshot are as follows:

<link type="text/css" rel="stylesheet" media="all"
href="/mysite/modules/node/node.css?u" />
<link type="text/css" rel="stylesheet" media="all"
href="/mysite/modules/system/defaults.css?u" />
<link type="text/css" rel="stylesheet" media="all"
href="/mysite/modules/system/system.css?u" />
<link type="text/css" rel="stylesheet" media="all"
href="/mysite/modules/system/system-menus.css?u" />
<link type="text/css" rel="stylesheet" media="all"
href="/mysite/modules/user/user.css?u" />

As we can see, the only stylesheets in evidence are those belonging to core modules and none from our theme. In addition, Drupal has noticed that we do not have any template files in our theme, most notably, page.tpl.php. Therefore, it has loaded an inbuilt page template file from modules/system/page.tpl.php and used it instead. Similarly, it is using the node.tpl.php file from modules/node/ as the basis for each node's layout.

In other words, we have a lot of work ahead of us in getting things up and running especially if our eventual requirements are going to be complicated. As we will see in the next recipe, this is one of the reasons why most themers prefer to use a starter theme and hit the ground running.

Drupal 6 Theming Cookbook Over 100 clear step-by-step recipes to create powerful, great-looking Drupal themes
Published: November 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Drupal, see here.)

Creating myzen, a Zen-based theme

While building a custom theme from scratch is great, most themers prefer to use starter themes as the base for their designs. Starter themes save time and effort as we do not have to perform tedious repetitive tasks and can rely on a tried and tested structure to use as a foundation for our theme.

In this recipe, we will be looking at creating a theme based on the most popular of all starter themes available on drupal.org, Zen.

Getting ready

Download the theme from http://drupal.org/project/zen and install it.

How to do it...

The Zen theme provides a starter kit which can be used to kick-start our theme.

  1. Navigate to the newly installed Zen theme's folder at sites/all/themes/zen. Copy the STARTERKIT folder inside it.
  2. Paste this folder into sites/all/themes. Rename the folder to the name of our new theme which, in this case, is myzen.

    Creating Custom Themes and Zen in Drupal 6

  3. Within this folder, rename the file STARTERKIT.info.txt to myzen.info.
  4. Open the .info file in an editor.
  5. Update the name field to the name of the theme which in this case is My Zen.
  6. Update the description field to My custom zen sub-theme.
  7. Save and exit this file.
  8. Open template.php in an editor and replace all occurrences of STARTERKIT_ with myzen using the find and replace all function.
  9. Save and exit this file.
  10. Repeat the above find and replace operation for the file theme-settings.php as well.
  11. Save and exit this file.

Visiting the theme administration page at admin/build/themes (Home | Administer | Site building | Themes) should now display our new theme. Screenshots, favicons, and other niceties can be configured just like for any other theme.

How it works...

The Zen theme contains a folder named STARTERKIT which is effectively a skeleton theme containing files and folders which can be readily customized to create a new theme. Once we have made a copy of this folder and renamed its .info file with the name of our theme, Drupal will recognize our new entry, which is now registered as a sub-theme of Zen as seen in the following screenshot.

While the Zen theme needs to be available, it does not need to be enabled for myzen to function.

Creating Custom Themes and Zen in Drupal 6

Once enabled, the front page of the site will look something like the following screenshot. Here we have a slightly fleshed-out skeleton to work with when we use Zen with a lot of the right pieces already in the right place.

Creating Custom Themes and Zen in Drupal 6

There's more...

The Zen theme comes with a plethora of settings and documentation which can at times, be a little overwhelming. But the rewards of familiarizing ourselves with them are worth our time.

Sub-theme of Zen

We can confirm that this is a sub-theme of Zen via its .info file which specifies that

base = zen

If we need another theme similar to myzen, we can create one with base = myzen and save ourselves a whole host of repeated operations.

RTFM

Just about every folder which comes with Zen contains a README.txt file which is filled to the brim with copious documentation. It is a good idea to always read through these files. prior to diving in head-first.

Rebuild theme registry automatically

The Zen theme contains a setting which rebuilds the theme registry automatically on every page load. This setting is exposed in the .info file as settings[zen_rebuild_ registry] and also via the theme configuration page.

Choosing a CSS layout for myzen

Layouts decide how elements on a page, customarily contained in DIVs, are positioned. Zen comes with a couple of preset layouts which can be used. If neither of them is suitable, a custom layout can be created. In this recipe, we will be replacing the default fixed-width layout with a liquid layout.

Getting ready

We are going to assume that the myzen theme from earlier in this article is enabled and the current default. It is also important to decide on the type of layout required for the site during the design stage.

How to do it...

All we are going to do here is replace one of the stylesheets used in myzen with another.

  1. Open myzen.info in an editor.
  2. In the section pertaining to stylesheet declarations, look for the line that declares the fixed-width layout which should usually be stylesheets[all][] = css/ layout-fixed.css.
  3. Replace this with stylesheets[all][] = css/layout-liquid.css.
  4. Save the file.
  5. As usual, clear the theme registry for our changes to take effect.

How it works...

The default fixed-width layout is, as the name suggests, of a fixed width. The positioning of the content does not vary based on the dimensions of the browser. By replacing the layout- fixed.css stylesheet in the myzen.info file, Drupal will now load the layout-liquid. css file instead. As a result, when we refresh the front page, we should now see that the ayout of the site occupies the full width of the screen and will flow and reposition itself as we resize the browser window.

There's more...

Zen and its sub-themes take care while displaying content and ensure that the markup is clean and semantically correct. Furthermore, in light of the growing internationalization of the web, it provides RTL support out of the box.

Sidebar support

The Zen theme, by default, comes with two sidebars—left and right—and it automatically displays the sidebar markup only if it contains content within.

RTL

A number of CSS files in Zen and other themes are often in two variants—one with an rtl suffix and the other without. RTL is an acronym for Right-To-Left and is used to signify that the stylesheet will be used when RTL mode is enabled, customarily for sites with content in languages such as Hebrew and Arabic.

Custom layouts

There are various advantages and disadvantages to using a fixed-width or a liquid layout, and a variety of ways to accomplish these very same layouts which are drastically different from the way Zen implements them. If a custom layout is being used, add the necessary rules and styles to a separate CSS file such as layout-custom.css.

Overriding Zen template files with myzen

Zen sub-themes, by default, use the page, node, and other template files directly from the base theme. In other words, we do not need to specify template files in our myzen theme unless we have to.

In this recipe, we are going to override the base theme's page.tpl.php template file with our own copy and make changes to it. As an example, let us see if we can reposition the status messages element which is usually represented by the $messages variable.

Getting ready

We are going to assume that the myzen sub-theme is already created and available.

How to do it...

The following steps outline the procedure to import a template file from the base theme to the sub-theme:

  1. Navigate to the sites/all/themes/zen/templates folder which contains the default templates.
  2. Copy the page.tpl.php file.
  3. Paste it into the sites/all/themes/myzen/templates folder.
  4. Open this file in an editor.
  5. Scroll down looking for any usage of the $messages variable. It should be located in a code block not dissimilar to the following:

    <?php print $breadcrumb; ?>
    <?php if ($title): ?>
    <h1 class="title"><?php print $title; ?></h1>
    <?php endif; ?>
    <?php print $messages; ?>
    <?php if ($tabs): ?>
    <div class="tabs"><?php print $tabs; ?></div>
    <?php endif; ?>
    <?php print $help; ?

  6. What we are looking to do is to move the status messages to a more prominent location above the title and the breadcrumb. After moving the relevant line of code further above, this block should look something like the following:

    <?php print $messages; ?>
    <?php print $breadcrumb; ?>
    <?php if ($title): ?>
    <h1 class="title"><?php print $title; ?></h1>
    <?php endif; ?>
    <?php if ($tabs): ?>
    <div class="tabs"><?php print $tabs; ?></div>
    <?php endif; ?>
    <?php print $help; ?

  7. Save the file and exit.
  8. As we have imported a template file, we also need to clear the theme registry.

We should now be able to see our changes in effect when a node, for example, is updated.

How it works...

Once we copied the template file from Zen to myzen and subsequently cleared the registry, Drupal was alerted during the theme registry rebuilding process that a new page.tpl.php file was available. Due to the fact that this template file was located in the myzen theme's folder, it took precedence over the version contained within the Zen theme's folder leading to our updates taking effect.

It is interesting to note that while the page.tpl.php template file in myzen took precedence over the file in the Zen folder, the latter was already overriding the equivalent template file in Drupal's system module folder.

The following screenshots should offer a before and after comparison of this recipe in action:

Creating Custom Themes and Zen in Drupal 6

In the preceding screenshot, we can see that the status message is being displayed below the title of the node. However, with our new template file in action, we can see that the status message is now displayed above the title and the breadcrumb as shown in the following screenshot:

Creating Custom Themes and Zen in Drupal 6

Adding a custom region to myzen

Regions are essentially containers for Drupal blocks. The layout of regions in a page effectively dictates the layout of the site.

The myzen theme contains the following regions by default:

  • First sidebar
  • Second sidebar
  • Navigation bar
  • Highlighted content
  • Content top
  • Content bottom
  • Header
  • Footer
  • Page closure

In this recipe, we will be looking to replace the existing Content bottom region with two separate regions named Content bottom 1 and Content bottom 2 respectively.

Getting ready

We are going to assume that the myzen theme from earlier in this article is enabled and the current default. We will be updating the default page.tpl.php template file that is used by myzen. If this file does not exist in sites/all/themes/myzen/templates, it will need to be imported into this folder from sites/all/themes/zen/templates/page.tpl.php.

How to do it...

First up, we will be updating the regions list in the .info file.

  1. Open the myzen.info file in an editor.
  2. Scroll down to the section dealing with regions.
  3. Look for the following declaration:

    regions[content_bottom] = Content bottom

  4. Replace the declaration in step 3 with the following:

    regions[content_bottom1] = Content bottom 1
    regions[content_bottom2] = Content bottom 2

  5. Save the file and exit.
    Now that we have added our new regions, we need to ensure that Drupal uses them by updating the page.tpl.php template.
  6. Open myzen's page.tpl.php file in an editor.
  7. Scroll down and look for the following line of code:

    <?php print $content_bottom; ?>

  8. Replace the line in step 2 with the following two:

    <?php print $content_bottom1; ?>
    <?php print $content_bottom2; ?>

  9. Save the file and exit.
  10. Clear the theme registry as per usual.

The new regions should now be visible if we navigate to the blocks administration page at admin/build/blocks (Home Administer | Site building | Blocks|).

How it works...

The following two screenshots should offer a before-and-after comparison of the blocks administration page. Each region in the layout is depicted by a yellow bar containing the name of the region.

Creating Custom Themes and Zen in Drupal 6

In the original layout, as displayed in the previous screenshot, we can see the regions highlighted in yellow. These regions include the lone Content bottom, situated below the content of the page. By simply editing the .info file, we have been able to replace this single option with two new regions, Content bottom 1 and Content bottom 2, as seen in the following screenshot.

Creating Custom Themes and Zen in Drupal 6

Drupal 6 Theming Cookbook Over 100 clear step-by-step recipes to create powerful, great-looking Drupal themes
Published: November 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Drupal, see here.)

Adding a background image to the theme

Zen-based themes come with a plethora of stylesheets separated logically by functionality. In this recipe, we will be exploring their use by adding a background image to our myzen theme.

Getting ready

As usual, we are going to assume that myzen is enabled and is the current default theme. Since we are going to be using a background image in this recipe, it will also be a good idea to ensure that the myzen theme is using a fixed-width layout to improve the visibility of the background.

The background image to be used should be optimized and saved in the sites/all/ themes/myzen/images/ folder. In this recipe, we will be setting the image file named body-bg.png as the background and repeating it along both the X and Y axes.

How to do it...

As Zen-based themes use stylesheets partitioned based on their functionality, we can add our rules to the file page-backgrounds.css as follows:

  1. Navigate to the sites/all/themes/myzen/css folder which contains a set of stylesheets available for customization.
  2. Look for the file named page-backgrounds.css and open it in an editor.
  3. The first rule which we are concerned with is the one for the body tag. Locate it and add the following highlighted rule to set the background image:

    body {
    background: url(../images/body-bg.png) repeat;
    }

    Since the CSS file is within the css folder, we need to use the ../images/ body-bg.png syntax to reference the file within the images folder.

  4. The next element we are going to be styling is the DIV with id="#page" which contains the regions of the layout. Look for the entry for #page and add the following rule to it:

    #page {
    background: #EEE;
    }

  5. Save the file and exit.

How it works...

The page-backgrounds.css file is added to the theme via its .info file. The myzen.info file will, by default, have a whole host of CSS files included not unlike the following list:

stylesheets[all][] = css/html-reset.css
stylesheets[all][] = css/wireframes.css
stylesheets[all][] = css/layout-fixed.css
stylesheets[all][] = css/page-backgrounds.css
stylesheets[all][] = css/tabs.css
stylesheets[all][] = css/messages.css
stylesheets[all][] = css/pages.css
stylesheets[all][] = css/block-editing.css
stylesheets[all][] = css/blocks.css
stylesheets[all][] = css/navigation.css
stylesheets[all][] = css/views-styles.css
stylesheets[all][] = css/nodes.css
stylesheets[all][] = css/comments.css
stylesheets[all][] = css/forms.css
stylesheets[all][] = css/fields.css
stylesheets[print][] = css/print.css
; stylesheets[handheld][] = css/mobile.css
; stylesheets[only screen and (max-device-width: 480px)][] = css/
iphone.css

Commented code
In the preceding excerpt from the .info file, lines prefixed with a semicolon are deemed to have been commented out and are not considered.

Most of the CSS files referenced in the file are skeleton stylesheets, each with its own functionality and purpose. They are usually littered with a lot of documentation and examples to get us started. In this case, the page-backgrounds.css file is already included and our rules should take effect automatically. It is important that we limit our changes in this stylesheet to rules pertaining to page element backgrounds. Including extraneous styles will defeat the purpose of partitioning the CSS based on functionality.

The resulting front page should now have a tiled background image for its body and a gray background for its content as demonstrated in the following screenshot:

Creating Custom Themes and Zen in Drupal 6

There's more...

Stylesheet management can sometimes be an involved process and is largely dependent on our own personal preferences.

Custom file structures

Some themers are uncomfortable with managing the multitude of CSS files that come with Zen and other themes. They either prefer their own logical structures or use a single monolithic stylesheet containing all the rules. There is nothing really wrong with this and it is simply a question of comfort and ease of use.

Unused stylesheets

Once we are done styling our theme, we will usually find that there are a number of stylesheets included in myzen.info which are empty or never used. Rather than deleting the relevant lines, it is prudent to just comment them out by prefixing them with a semicolon.

Adding a conditional stylesheet in Zen

Conditional stylesheets are a frequent requirement to accommodate hacks and workarounds specific to versions of the Internet Explorer browser. While other themes would require us to conditionally introduce said stylesheets either using a module or by inserting the appropriate HTML directly in the page.tpl.php template, Zen-based themes offer a straightforward alternative.

In this recipe, we will be looking at the procedure involved in adding a conditional stylesheet which is loaded only if the browser is Internet Explorer (IE). Furthermore, the version of the browser has to be 7 (IE7) or greater.

Getting ready

This recipe centers around the myzen sub-theme which is assumed to have been created, enabled and set as the default theme. A CSS file named ie7.css should be created and saved inside myzen's css folder. Hacks and workarounds particular to IE7 are to be added to this file.

How to do it...

Adding a conditional stylesheet to the myzen theme can be accomplished as follows:

  1. Navigate to the sites/all/themes/myzen folder.
  2. Open the myzen.info file in an editor.
  3. Scroll down to the section dealing with conditional stylesheets. The default configuration should look something like the following:

    conditional-stylesheets[if IE][all][] = css/ie.css
    conditional-stylesheets[if lte IE 6][all][] = css/ie6.cs

  4. Add the following statement to this section:

    conditional-stylesheets[if IE gte 7][all][] = css/ie7.cs

    lte and gte in the code above stand for "lesser than or equal to" and "greater than or equal to". More information and a list of other operators can be found at http://msdn.microsoft.com/en-us/ library/ms537512.aspx.

  5. Save the file and exit.
  6. Since we have made changes to the .info file, the theme registry needs to be rebuilt.

When the site is now viewed in IE7, the ie7.css stylesheet will also be loaded.

How it works...

When the HTML source for a sample page is now viewed, the conditional stylesheets declaration used in this recipe will have translated to something like the following:

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="/mysite/
sites/all/themes/myzen/css/ie.css?J" />
<![endif]-->
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" media="all" href="/mysite/
sites/all/themes/myzen/css/ie6.css?J" />
<![endif]-->
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="/mysite/
sites/all/themes/myzen/css/ie7.css?J" />
<![endif]-->

As evident from the preceding source, Zen translates our entries in the .info file to conditional comments and inserts them as markup. The conditional comments are only triggered in Internet Explorer which includes the appropriate stylesheet accordingly.

There's more...

The maintainers of the Zen theme have made this functionality available to other themes as well through the use of a dedicated module.

Conditional stylesheets for other themes

The conditional stylesheets module (http://drupal.org/project/conditional_ styles) provides similar functionality for non-Zen themes. A number of themes rely on this module to simplify the process of adding conditional comments.

Modifying myzen's theme settings

Visiting the theme configuration page for the myzen theme created earlier in this article should reveal a number of theme-specific settings. In this recipe, we are going to learn how these settings are added and then, rather than creating our own setting, we will familiarize ourselves with their structure by learning how to remove an existing setting.

Getting ready

As we are working with the myzen theme, it should be enabled and set as the site's default theme. Furthermore, as detailed in the recipe where myzen was created, all instances of STARTERKIT in the theme-settings.php file should be replaced by myzen. Once this is done, the theme configuration page for the myzen theme should include theme-specific settings as in the following screenshot.

Creating Custom Themes and Zen in Drupal 6

How to do it...

The setting that we will be removing is the Show block editing on hover checkbox. To do so, we will be working with three different files—myzen's theme-settings.php, myzen.info, and Zen's theme-settings.php.

  1. Load all three files in three separate editors.
  2. Comparing myzen's theme-settings.php and Zen's theme-settings.php, we can tell that all the settings in the preceding screenshot are exported by Zen via a function named zen_settings(). myzen gets access to these settings as it is a sub-theme of Zen.
    The block editing links setting appears in the following block of code:

    $form['zen_block_editing'] = array(
    '#type' => 'checkbox',
    '#title' => t('Show block editing on hover'),
    '#description' => t('When hovering over a block, privileged
    users will see block editing links.'),
    '#default_value' => $settings['zen_block_editing'],
    );

  3. As highlighted, the setting is stored in an index named zen_block_editing. Therefore to remove this setting, we just need to clear this index.
  4. Switch to myzen's theme-settings.php file and look in the myzen_settings() function for the following code:

    // Remove some of the base theme's settings.
    unset($form['themedev']['zen_layout']);

  5. We are doing something similar to a different variable. Add the following code under the block in step 4:

    // Remove the setting for block editing links.
    unset($form['zen_block_editing']);

  6. Save the file and exit.
  7. Navigate back to myzen's theme configuration page at admin/build/themes/ settings/myzen (Home Administer | Site building | Themes | Configure|) and refresh the page to confirm that the Show block editing on hover checkbox is no longer present.
  8. Click on the Save configuration button at the bottom of the page to ensure that any vestiges of the setting are also cleared from the database.

We still have a little more work to do. Even though the checkbox appears to have vanished, hovering over a nearby block will result in a block edit link appearing.

Creating Custom Themes and Zen in Drupal 6

The culprit is the following block of code in myzen_settings:

// Get the default values from the .info file.
$defaults = zen_theme_get_default_settings('myzen');
// Merge the saved variables and their default values.
$settings = array_merge($defaults, $saved_settings);

What is happening is that default settings from the myzen.info file are being loaded as well. Looking at the file in an editor the following telltale entry appears to be the one responsible:

settings[zen_block_editing] = 1

Commenting out this line of code and subsequently, clearing the theme registry should sort our problem out.

How it works...

The Zen theme exports a set of variables and allows its sub-theme, myzen, to act upon them by updating their values, adding new settings, or removing existing ones. The addition of new settings can be achieved through the use of the Forms API while removal of existing settings is performed using an unset() operation. Furthermore, default values for each settings can be added or removed via myzen.info as well.

Summary

This article focused on starter themes, specifically Zen.


Further resources on this subject:


About the Author :


Karthik Kumar

Karthik Kumar is a Drupal developer residing in Chennai, India. He first came across Drupal in late 2004 and has been a fan ever since. He maintains a number of modules on http://drupal.org under the moniker Zen – http://drupal.org/user/21209.

Books From Packt


Drupal 7
Drupal 7

Drupal 6 Attachment Views
Drupal 6 Attachment Views

Drupal 6 Search Engine Optimization
Drupal 6 Search Engine Optimization

Drupal 6 Performance Tips
Drupal 6 Performance Tips

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Flash with Drupal
Flash with Drupal

Drupal 6     Content Administration
Drupal 6 Content Administration


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
L
A
y
v
A
u
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