Theming Drupal with Zen
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.
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 :
- Installed Zen and followed the build your own sub-theme steps, choosing the fixed layout
- 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.
- The fixed layout was too wide for me. I edited
layout.css, and reduced the width of
- I wanted to display a panoramic picture in the header, so I increased the height of
- Next I wanted to change the font, the font sizes, anchor styles and font colors. I copied
html-elements.cssfrom the parent zen theme folder to the local sub-theme folder and updated
template.phpso that the local subtheme copy of
madtechsupport-html-elements.csswas loaded immediately before
madtechsupport.css(note, for Drupal 6
madtechsupport.infowould need updating instead of
madtechsupport-html-elements.cssI defined a new 11 pt base font, changed the
font-familyto Verdana, adjusted the
h6and changed the
text-decorationfor each of the anchor states.
- Moving on I next edited
madtechsupport.css. I added the
#header, I moved the
#primarylinks to the left (
margin-left: 0px;) and I moved the
#search-boxto the right (
madtechsupport.cssthere were anchor attributes for
#site-namethat were overriding those from
madtechsupport-html-elements.cssso I deleted those attributes for
madtechsupport.css. Also I applied a
- 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
border-bottom: 1px dotted #999999;to
border-top: 1px dotted #999999;to
border-left: 1px dotted #999999;to
- Added the dotted borders revealed the need for some additional padding and adjustment to margins. In
#header-inner(because of Internet Explorer, where possible, adding a margin to an "inner" component is preferential to using padding) and
- 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.phpfrom the parent theme folder to the local sub-theme folder and deleted the line with
div id="skip-to-nav"from this file.
- 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.cssfrom the parent theme directory to the local sub-theme directory and set
width: 212px;. Note that in Drupal 6 it was also necessary to edit
madtechsupport.infoand uncomment the
conditional-stylesheetsentry for IE.