Theming Drupal with Zen

"Zen is the ultimate starting theme for Drupal." At least that is the claim made by the Zen Project. One of the highlighted points made by the Zen Project is their fantastic online documentation.

I feel that claim is just a little bit misleading. According to me the Zen Project has fantastic online documentation for the purpose of installing Zen. After which you are expected to be familiar with CSS and to know what to do on your own.

If you are also a beginner to CSS and Drupal theming then you will need to get up to speed with CSS first, before you start theming with Zen. It should not be too hard, here are some self study suggestions :

• Do a CSS online tutorial.
• Buy the book and work through the chapter on theming.
• Watch the Getting Started with Zen movie.

By the time you are done with these steps you should have Firefox installed with Firebug, MeasureIt, ColorZilla and maybe a few other web development addons and be ready to starting theming with Zen!

Below are some of the steps that I applied to turn the Zen Starter Kit into something that looks like the mmKanso theme. Note these steps apply to Drupal 5, with some additional notes for Drupal 6 :

1. Installed Zen and followed the build your own sub-theme steps, choosing the fixed layout
2. From the themes administration page within Drupal I enabled the new sub-theme (the one based on STARTERKIT) and from the configuration section for the sub-theme I de-selected "Logo" and set "Display breadcrumb" to no, because I didn't want to display these items.
3. The fixed layout was too wide for me. I edited layout.css, and reduced the width of #page, .no-sidebars and .sidebar-left by 200px.
4. I wanted to display a panoramic picture in the header, so I increased the height of #header-inner to 110px.
5. Next I wanted to change the font, the font sizes, anchor styles and font colors. I copied html-elements.css from the parent zen theme folder to the local sub-theme folder and updated template.php so that the local subtheme copy of madtechsupport-html-elements.css was loaded immediately before madtechsupport.css (note, for Drupal 6 madtechsupport.info would need updating instead of template.php). Within madtechsupport-html-elements.css I defined a new 11 pt base font, changed the font-family to Verdana, adjusted the color, font-size and line-height for h1—h6 and changed the color and text-decoration for each of the anchor states.
6. Moving on I next edited madtechsupport.css. I added the background image to #header, I moved the #primary links to the left (margin-left: 0px;) and I moved the #search-box to the right (float: right; and margin-right: 0px;).
7. In madtechsupport.css there were anchor attributes for #site-name that were overriding those from madtechsupport-html-elements.css so I deleted those attributes for #site-name from madtechsupport.css. Also I applied a font-style to #site-slogan and #mission.
8. At this point the theme was starting to take shape. The mmKanso theme used a dotted gray line beneath the heading. I added border-left: 1px dotted #999999; to #content-inner, border-bottom: 1px dotted #999999; to #navbar, border-top: 1px dotted #999999; to #footer and border-left: 1px dotted #999999; to #primary a.
9. Added the dotted borders revealed the need for some additional padding and adjustment to margins. In layout.css I added margin-left: 5px; to #header-inner (because of Internet Explorer, where possible, adding a margin to an "inner" component is preferential to using padding) and padding: 15px; to #content-inner. In madtechsupport.css I added margin-bottom: 10px; to #mission and padding-left: 5px; to #primary a.
10. Zen comes enabled with a "Skip to Navigation" link in the top right corner of header. This link has been colored white so that against a white background it will remain hidden until a mouse over event upon which it changes color to black. The problem for me is that I have used an image for the background of the header so the link in permanently visible. The other problem is that the link doesn't do that much anyway! So I removed it. To remove the "Skip to Navigation" link I copied page.tpl.php from the parent theme folder to the local sub-theme folder and deleted the line with div id="skip-to-nav" from this file.
11. The last step was to check how the site was looking in Internet Explorer. There were two noticeable problems. The first was that Internet Explorer 6 used dashes instead of dots for the 1px borders (this is a known IE6 problem that is fixed in IE7). I decided to not try and fix or work around this problem (note, a 2px border is rendered as dotted). The other problem was that the search box was appearing across two lines instead of one. Again this is a problem that others have experienced. To fix this I copied ie.css from the parent theme directory to the local sub-theme directory and set #search-box to be width: 212px;. Note that in Drupal 6 it was also necessary to edit madtechsupport.info and uncomment the conditional-stylesheets entry for IE.