Skip directly to content

Creating Zen theme in Drupal

on Fri, 10/23/2009 - 05:56

Drupal through ZEN

I am amazed at the growing popularity of Drupal amongst the web developer community. My regular interaction with fellow developers across the globe makes me believe that more and more of them are now switching over to Drupal because of the greater flexibility and the many out of the box themes available in Drupal. Drupal can be downloaded for FREE from http://drupal.org/project/drupal

One fine example would be a popular Drupal theme called ‘Zen’. The Zen theme is one of the most widely used Drupal themes as it is studded with many a stand out features such as:

1. A 3-column collapsible layout

2. Block Editing feature

3. Body classes which are highly useful

4. Excellent php and css documentation, a highlight of the Zen theme

5.  An exclusive layout.css file to help change the type of column layout

6.  Availability of print.css file for an optimized print display.

Originally shaped by Jeff Robbins and then worked upon further by John Albin, the Zen theme is the most complete theme available in Drupal as of today. One can easily build a Zen sub-theme using their own designs in the base theme. The HTML source order used in the Zen theme reflects content before navigational bars, thereby increasing its accessibility to users. Also, the content-first layout makes the Zen theme very Search Engine friendly.

How to create a new sub theme modeled over Zen?

A basic Zen theme is very easily extendable using sub-themes. Create a sub-theme of Zen which is located in a folder within the root zen/. E.g. the files for the Zen Classic sub-theme can be found on zen/zen_classic folder. Now follow these simple steps:

  1. Copy and Rename the STARTERKIT folder to be used as your new sub-theme
  2. The next step revolves around selection of your layout. If you want a liquid layout based theme copy layout-liquid.css file and place it in your sub-theme folder. Alternatively, you can pick the fixed-width layout by copying the layout-fixed.css from the zen folder and then placing the same in your sub-theme folder. Now rename the layout stylesheet to ‘layout.css’
  3. Next, copy the print stylesheet and place it inside your sub-theme folder
  4. From the zen folder copy the zen stylesheet and place it in the folder of your sub-theme. Rename it  with the name of your new sub-theme
  5.  Edit theme-settings.php and template.php and replace all occurrences of “STARTERKIT” with the name of your new sub-theme
  6. Now login as an Administrator on your Drupal website and enable your new sub-theme from Administer > Site building > Themes (admin/build/themes)

Now you can enjoy working on your new sub-theme designed over the Zen theme.

For all the above mentioned exciting reasons, Zen beats all the other themes hands-down when it comes to building a standard-compliant theme. Zen is the ultimate theme to work around in Drupal and why settle for anything other than the Best? Don’t believe me? Go try the Zen theme and enjoy the hassle-free designing of your Drupal website on it. You can download the Zen theme from http://drupal.org/project/zen