IMPORTANT: In Drupal 6, the theme system caches template files and which theme functions should be called. What that means is if you add a new theme or preprocess function to your template.php file or add a new template (.tpl.php) file to your sub-theme, you will need to rebuild the "theme registry." See the Theming Guide

Drupal 6 also stores a cache of the data in .info files. If you modify any lines in your sub-theme's .info file, you MUST refresh Drupal 6's cache by simply visiting the admin/build/themes page.

The base Zen theme is designed to be easily extended by its sub-themes. You shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you should create a sub-theme of zen which is located in a folder outside of the root zen/ folder. The examples below assume zen and your sub-theme will be installed in sites/all/themes/, but any valid theme directory is acceptable (read the sites/default/default.settings.php for more info.)

Why? To learn why you shouldn't modify any of the files in the zen/ folder, see Why use Zen?

  1. Copy the STARTERKIT folder out of the zen/ folder and rename it to be your new sub-theme. IMPORTANT: The name of your sub-theme must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.

    For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it as sites/all/themes/foo.

    Why? Each theme should reside in its own folder. To make it easier to upgrade Zen, sub-themes should reside in a folder separate from their base theme.
  2. In your new sub-theme folder, rename the STARTERKIT.info.txt file to include the name of your new sub-theme and remove the ".txt" extension. Then edit the .info file by editing the name and description field.

    For example, rename the foo/STARTERKIT.info.txt file to foo/foo.info. Edit the foo.info file and change "name = Zen Sub-theme Starter Kit" to "name = Foo" and "description = Read..." to "description = A Zen sub-theme".

    Why? The .info file describes the basic things about your theme: its name, description, features, template regions, CSS files, and JavaScript files. See the Drupal 6 Theme Guide for more info

    Then, visit your site's admin/build/themes to refresh Drupal 6's cache of .info file data.

  3. By default your new sub-theme is using a fixed-width layout. If you want a liquid layout for your theme, delete the unneeded layout-fixed.css and layout-fixed-rtl.css files and edit your sub-theme's .info file and replace the reference to layout-fixed.css with layout-liquid.css.

    For example, edit foo/foo.info and change this line:
    stylesheets[all][] = css/layout-fixed.css
    to:
    stylesheets[all][] = css/layout-liquid.css

    Why? The "stylesheets" lines in your .info file describe the media type and path to the CSS file you want to include. The format for these lines is: stylesheets[MEDIA][] = path/to/file.css

    Then, visit your site's admin/build/themes to refresh Drupal 6's cache of .info file data.

    Alternatively, if you are more familiar with a different CSS layout method, such as Blueprint or 960.gs, you can replace the "css/layout-fixed.css" line in your .info file with a line pointing at your choice of layout CSS file.

  4. Edit the template.php and theme-settings.php files in your sub-theme's folder; replace ALL occurrences of "STARTERKIT" with the name of your sub-theme.

    For example, edit foo/template.php and foo/theme-settings.php and replace every occurrence of "STARTERKIT" with "foo".

    It is recommended to use a text editing application with search and "replace all" functionality.

  5. Log in as an administrator on your Drupal site and go to Administer > Site building > Themes (admin/build/themes) and enable your new sub-theme.

    Optional:

  6. Modifying Zen core template files: If you decide you want to modify any of the .tpl.php template files in the zen folder, copy them to your sub-theme's folder before making any changes. And then rebuild the theme registry.

    For example, copy zen/templates/page.tpl.php to foo/templates/page.tpl.php.

  7. Theming Drupal’s search form: Copy the search-theme-form.tpl.php template file from the modules/search/ folder and place it in your sub-theme's folder. And then rebuild the theme registry.

    You can find a full list of Drupal templates that you can override in the templates/README.txt file or http://drupal.org/node/190815

    Why? In Drupal 6 theming, if you want to modify a template included by a module, you should copy the template file from the module's directory to your sub-theme's directory and then rebuild the theme registry. See the Drupal 6 Theme Guide for more info: http://drupal.org/node/173880
  8. Further extensions of your sub-theme: Discover further ways to extend your sub-theme by reading Zen's documentation and Drupal 6's Theme Guide.

Comments

giorgio79’s picture

I see there is no local.css or style.css added by default?

Am I missing sg?

I believe there should be one so users can put their own css modifications in there.

hal9000_jr’s picture

If you use Zenophile http://drupal.org/project/zenophile it will create a blank CSS file that you can edit it yourself.

Of course, since you are using a sub-theme, you can edit the subtheme files directly and use the custom theme file for truly custom work.

ptoly’s picture

I want to set up a 2 column layout on a site.

Looked through the documentation online, 3 times, only found info on fluid versus fixed columns. Nothing about choosing the NUMBER of columns.

Did Google searches: "drupal setup column zen", "drupal configure column zen", "drupal zen 2 column", "drupal zen two column".

Came up with a lot of results talking about how easy it is to create 1, 2, 3 column layouts. But not one line actually documenting how to do this...

I'm sure it is buried somewhere in small print. I think this should be a core and central step to the setup documentation. Don't you?

Sigh.

camhoward’s picture

Hi ptoly,

I was wondering how to configure the number of columns, too. Here's what worked for me.

It seems the left and right sidebars (columns) display on the page only when they have blocks of content assigned to them. I had no right sidebar on the page until I created a block and assigned it to the right sidebar - then voila!

Here's how:

  • Log into your site
  • Go to Administer › Site building › Blocks
  • Scroll down a bit and you'll see a list of existing blocks and the regions to which they are assigned
  • If you assign blocks to the left sidebar and the right sidebar, you'll have a three-column layout
  • If you assign blocks only to the left sidebar or only to the right sidebar, you'll have a two-column layout
  • To create a new block with your custom content, click on the "Add block" tab, create the block, save it, and then assign it to a region
  • To save your changes, click the "Save blocks" button at the bottom of the page

You can even choose the pages on which the blocks should display (or those on which it should not display). For example, for a site with a two-column layout on the home page and a three-column layout on all other pages, the blocks that are assigned to the right sidebar can be set to display on all pages except the home page.

Hope this helps!