Create a Drupal 6 theme based on the Zen starter theme

What is Zen?

Taken from the Zen project page:

Zen is the ultimate starting theme for Drupal. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Bluemarine. This theme has fantastic online documentation and tons of code comments for both the PHP (template.php) and HTML (page.tpl.php, node.tpl.php).

Why use Zen?

Zen gives a great framework for you to work from as a lot of the hard work in making the default Drupal CSS rules easier to customise as well as having a starter kit for you to modify giving you the basics to create your own theme without needed to mess around with the in's and out's of Drupals theming system.

Where do I get Zen?

You can download Zen from the project page on Drupal.org. As of writing there are 2 versions available for Drupal 6; Zen 6.x-1.1 and Zen 6.x-2.0-beta1. We will be using Zen 6.x-1.1 as it isn't a good idea to use modules or themes that are in alpha, beta or RC on a production site.

How do I install Zen?

Once you have downloaded the file from Drupal.org you will need to extract the zen folder and place it in your /sites/all/themes directory. You will need to create a directory called themes within the /sites/all directory if it doesn't already exist.

If you need a program to extract the file from Drupal.org, I recommend you use 7-zip which is a freeware application.

How do I start using Zen?

Within the Zen directory is a directory called STARTERKIT. Copy this folder and return to the /sites/all/themes directory. Paste the STARTERKIT directory from your clipboard into this directory. You should have a tree structure like the below:

+ sites
|-+ all
| |-+ themes
| | |-- zen
| | |-- STARTERKIT

Rename the STARTERKIT directory to the name you wish to give your theme. This is the machine name that is used in the backend so you have to use lowercase characters and use underscores (_) instead of spaces.

For this tutorial we will name the theme drupal_theme, which gives us the following tree structure.

+ sites
|-+ all
| |-+ themes
| | |-- zen
| | |-- drupal_theme

Navigate within your drupal_theme directory and rename the file STARTERKIT.info.txt to yourthemename.info, in my case it will be drupal_theme.info.

Open the file in your editing program.

Change the name from name = Zen Sub-theme Starter Kit to name = Your Theme Name and change the description to a description of your theme.

Also change the STARTERKIT.css text to yourthemename.css, in my case it will be drupal_theme.css.

Save and close the file.

You need to make a choice as to whether you would like your theme to be a liquid layout, i.e. it will stretch the width of the browser so there is no whitespace on either side of the site or a fixed layout site where the site is a fixed width dependant of the browser window.

Liquid/adaptive width

Copy the file layout-liquid.css from the /sites/all/themes/zen/zen directory to the /sites/all/themes/yourthemename directory. Then rename the file layout.css

Fixed width

Copy the file layout-fixed.css from the /sites/all/themes/zen/zen directory to the /sites/all/themes/yourthemename directory. Then rename the file layout.css

Copy over the following CSS files from /sites/all/themes/zen/zen to your /sites/all/themes/yourthemename directory.

  • zen.css
  • print.css
  • html-elements.css

Rename the zen.css to yourthemename.css, in my case it will be drupal_theme.css.

In your theme folder, open and edit the files template.php and theme-settings.php, replacing all instanced of STARTERKIT with your theme name, so I replaced all instances of STARTERKIT with drupal_theme.

While logged in as a user with rights to the admin pages, navigate to Administer > Site building > Themes (admin/build/themes) and set your theme to default and save.

How do I customise the theme?

The structure of the page as in the way the sidebar, header, content, footer is layed out is mostly in the php files within the Zen theme and the CSS files we copied over to our theme folder allows us to change the styling of these items to make them appear the way we want.

Change the font size

The default font size is defined in the html-elements.css file.

<?php
  
#page
  
{
    
/*
     * To use a 12px font size on the page, delete the 14px declarations.
     * to use a 14px font size on the page, delete the 12px declarations.
     */

    /* Use a 12px base font size with a 16px line height */
    font-size0.75em/* 16px x .75 = 12px */
    
line-height1.333em/* 12px x 1.333 = 16px */

    /* Use a 14px base font size with a 18px line height */
    font-size0.875em/* 16px x .875 = 14px */
    
line-height1.286em/* 14px x 1.286 = 18px */
  
}
?>

The #page rule is the wrapper that surrounds all the code. So anything we apply to this will be applied to all elements under it unless they are overwritten later on in the CSS file. By default the font size is set to 14px as it is the latter rule of the two. If you wish to reduce the font size to 12px, simply delete the last three lines (you can also delete the additional comments at the top of the rule), so you get the following:

<?php
  
#page
  
{
    
/* Use a 12px base font size with a 16px line height */
    
font-size0.75em/* 16px x .75 = 12px */
    
line-height1.333em/* 12px x 1.333 = 16px */
  
}
?>

How do I change the background colour?

In the yourthemename.css file, change the body rule from:

<?php
body
  
{
    
margin0;
    
padding10px;
  }
?>

To:

<?php
body
  
{
    
margin0;
    
padding10px;
    
background-color#c00;
  
}?>

Where you change the colour to what ever you want. If you don't know the hex value for the colour you want to use, you can use the RGB colour in the following format:

<?php
body
  
{
    
margin0;
    
padding10px;
    
background-colorrgb(20400);
  }
?>

Or you can find the hex colour in this hex colour reference chart.

How do I add an image to use as my background?

In the yourthemename.css file, change the body rule from:

<?php
body
  
{
    
margin0;
    
padding10px;
  }
?>

To:

<?php
body
  
{
    
margin0;
    
padding10px;
    
background#fff url(background.jpg) top center repeat;
  
}?>

Place the image in your theme folder. Alternatively if you want to keep your theme folder as tidy as possible, you can create a folder called images within your theme folder and change the CSS code to:

<?php
body
  
{
    
margin0;
    
padding10px;
    
background#fff url(images/background.jpg) top center repeat;
  
}?>

If you chose a background image that makes the text hard to read, you can change the background colour of the #main element, which is the wrapper of all the main content excluding the header and footer, to white.

<?php
#main
  
{
    
background-color#fff;
  
}?>

You can continue editing your theme by editing the CSS rules within the main CSS file (yourthemename.css). For more references on CSS, check out the Top HTML/CSS resources for beginners post.

Comments

1. there is no such /sites/all/themes/zen/zen folder. 2. layout-fixed.css and layout.liquid.css are in sites\all
\themes\zen\STARTERKIT\css folder
3. I can't find
* zen.css
* html-elements.css in anywhere.

It appears there have been some large changes to Zen since I wrote this. Which I pointed to by saying that 6.x-2.x was in dev.

html-elements.css has gone
html-reset.css has arrived