As part of the Drupal Theming Study Group, we’re taking a look at using the Drupal base theme Zen as the starting point for our themes. The Zen theme isn’t ready to go by itself - you will need to create your own theme and customize that to get a Drupal site up and running that looks halfway decent.

The first step to using Zen is to download Zen and install it in sites/all/themes. In this case, we’re using version 6.x-2.0, which is important as there is lots of documentation about Zen that is outdated because the theme was reorganized. This was pretty confusing when we got started. Using drush, the command is:

drush dl zen

We enabled zen from the /admin/build/themes Themes Administration Page. The zen theme does display your content, but it does not look pretty. Here is a screenshot of a Drupal installation running Zen:

We’ve got a long way to go before that looks good. To get started, we’re going to create a sub-theme based on Zen. Zen makes this very easy by supplying a complete ready-to-go subtheme in a folder called STARTERKIT. The directions to create the subtheme are in STARTERKIT/README.TXT, and should be followed in that order - they are pretty straightforward.

After you follow the directions in the README.TXT, you will have a new theme directory, but your theme will still look exactly like Zen. This is because you haven’t actually done anything to the visual layout,unless you chose to go with a fluid layout instead of a fixed layout (Step 3 of the README.TXT).

Zen’s CSS Files

The next step is to start editing your new theme’s CSS files. This is where we ran into problems with the Zen documentation, because it wasn’t clear which of the CSS files did what. So we started with the sub-theme’s INFO file, to see which CSS files were included, by default:

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/panels-styles.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

This is a pretty long and exhaustive list of CSS files. Starting from the beginning, we have

html-reset.css

This looks like it would be your “reset” CSS file that is quite popular in some circles, but in this case, the inline comments actually say that it’s for setting your default CSS properties instead. I suppose that if you were going to use Blueprint or 960 Grid System with Zen instead, you wouldn’t use this CSS file. In here, you will find:

• default font settings for individual elements
• margin, line-height, and font size for headings
• margins for block-level elements
• margins and paddings for list elements
• settings for hyperlinks, in the correct order (link,visited,hover,focus,active)
• table settings,abbreviations,images, horizontal rules and forms

If you need to change a site-wide default for these elements, do it here.

wireframes.css

Under Theme Development Settings for your subtheme, you can turn on wireframes for development/design purposes with the “Display borders around main layout elements” setting. You won’t need to edit this file.

layout-fixed.css and layout-liquid.css

With Zen, you can have a fixed layout or a fluid layout. Zen is a tableless design. Use layout-fixed.css to have a fixed width layout, or layout-liquid.css to have a fluid layout. In either case, you will edit this file to change the overall structure, positioning, and layout of your site - positions of divs, widths, heights, margins, borders, and padding.

Major elements of your Zen-based site are:

• body
• page-wrapper
• page
• header
• search-box
• main-wrapper
• main
• content
• navigation
• first sidebar
• second sidebar
• footer

Within layout-fixed.css, you will find the content set to 960 pixels wide with no sidebars, 760 pixels wide with one sidebar, and 560 pixels wide with two sidebars. Each sidebar will be 200 pixels wide.

With layout-liquid.css, the minimum width of the site will be 960 pixels wide, and each sidebar will still be 200 pixels wide, but the content will take up the remaining width within the page by default.

To completely change your look and feel from the two sidebars and a content structure, change the layout-fixed.css or layout-fluid.css to something more inventive.

page-backgrounds.css

Set your background colors or images in page-backgrounds.css for the body, page-wrapper, page, header, main content area, and footer. This is pretty straightforward.

tabs.css

Zen provides default styles for your primary and secondary menus. Edit the CSS tab settings here to change the font, margins, and backgrounds - for instance you may want to connect the background color of the highlighted tab to the content area.

messages.css

This is for styling Drupal messages, warnings, and errors - if you don’t change these, they can be really out of place in your Drupal site.

pages.css

This CSS file holds a lot of individual styles for your page.tpl.php template. This is not for major structural changes - those should be in layout-fixed or layout-liquid, but instead for visual details such as font size, colors, alignments and minor margin and padding adjustments. This is one of the main CSS files you will have to spend a lot of time in to get your site looking correct.

block-editing.css

Used for Zen’s hover block editing feature - no need to change this CSS file

blocks.css

Edit your block’s CSS in here. Provide default settings for all of your blocks, or customize the appearance of individual blocks with settings for each Drupal core block.

navigation.css

Styling for Drupal’s Primary and Secondary menus - nothing in here by default.

panels-styles.css

Styling for the Panels module - nothing in here either.

views-styles.css

Styling for the Views module - again, up to you to provide anything you need.

nodes.css

Styles for nodes - you can provide different styles for published or unpublished content and for sticky nodes. When you create a new node type, that node is given a style of node-type-your-new-node-type-name, and you can customize the styles by node type in nodes.css as well.

comments.css

CSS Styles for comments - you can do all kinds of interesting tricks with CSS here, such as zebra striping odd and even comments, highlighting non-anonymous comments, or marking comments that the current user hasn’t read.

forms.css

The form styling not only includes defaults for the standard HTML form controls, but also contains styles for the search box, login, and Open Id Login.

fields.css

Contains styling elements for Content Construction Kit (CCK) fields - this is left up to you to decide.

print.css

A nice printer-friendly CSS file.

Hopefully you find this description of the CSS files included with the Zen starter kit useful!