Zen theme with Drupal

Zen theme & sub themes for Drupal

If you are building your own standards-compliant theme for Drupal, start with the Zen theme. Its an easy and clean theme with great documentation both included and available online. It has the support of a large community of developers and users. The Zen theme is meant to be a very flexible standards-compliant and semantically correct XHTML theme that can be easily modified through CSS and Drupal’s template system. I have found it works well alongside the CSS Injector module.

Install Zen theme and create sub theme:

  • install zen theme in the ./all/themes/ folder
  • read the README and follow directions on Build your own sub-theme (use your new theme name in place of NewSubthemeName)
    • #1.) copy the STARTERKIT folder into ./sites/all/themes/ (or ./sites/currentsite/themes/) & rename STARTERKIT to the name of your NewSubthemeName
    • #2.) rename the Zen.info to your new NewSubthemeName.info (for Drupal 6, NOT 5)
      • edit the file, make: “name= NewSubthemeName
    • #3.) copy a layout file from the Zen theme (either layout-liquid.css or layout-fixed.css) into your NewSubthemeName folder
      • rename the file layout.css
    • #4.) copy the zen.css into your NewSubthemeName folder
      • rename the file NewSubthemeName.css
    • #5.) copy the print.css from the zen folder and place it in your NewSubthemeName folder
    • #6.) copy the html-elements.css from the zen folder and place it in your NewSubthemeName folder
    • #7.) edit the template.php and theme-settings.php files in NewSubthemeName folder
      • replace ALL occurances of STARTERKIT with NewSubthemeName.
  • Administer > Site building > Themes (./admin/build/themes) and enable your new sub-theme

Notes:

  • Zen sub themes reference to the main Zen theme and so the Zen theme needs to be installed for sub themes to work properly.
  • The Zen name is homage to the CSS Zen Garden site where designers can redesign the page purely through the use of CSS.
  • the README.txt contains info on overriding the Zen core style sheets and templates as well as info on theming the search form.
  • The HTML source order has content placed before sidebars or the navbar for increased accessibility and SEO.
  • Zen themes work with Update Status for both Drupal 5 & 6.

Comments

In your styles sheets use PX not EM for body font-size attribute, em seemed to cause problems, ie.

body { font-size: 13px; }

also note: no {background-color: transparent} in IE6

thx