Zen

Zen is a starter theme. You could build your next theme as a Zen sub-theme without having to build a whole new theme.

Download Zen from drupal.org/project/zen. This version is 6.x-2.0 from 2010-Jun-26, a 176.13 KB download.

Zen has several big negatives and lots of positives. First the reasons to not use Zen.

• Zen is hard to learn. Zen might be worthwhile if you are a professional Web developer but do not use it for your first project if you are only going to develop one theme in your whole life.
• Zen is stuck with fixed height navigation bars and requires a lot of work for anything else.
• No drop down menus.
• Zen has only one sample subtheme and the sample does not show much.

Now for the good things.

• There are lots of Zen subthemes from other contributors. See Zen subtheme.
• The content is first in the output order. See the description below.
• The configuration page includes:
  • Wire frame display for development.
  • Liquid or fixed layout.
  • Theme registry rebuild for every view during development.
  • Breadcrumb settings.

Content first

This theme produces "content first". To make your page accessible, you have to minimise information in the header and content top regions. From the Zen documentation page:

The parts of the page are placed in the XHTML in the following order:

1. Header
2. Content
3. Navbar
4. Left sidebar
5. Right sidebar
6. Footer

But the page will visually appear to be presented to the user in the following order:

1. Header
2. Navbar
3. Left sidebar
4. Content
5. Right sidebar
6. Footer

Example themes

Zen includes the sub-theme Zen Classic. Zen Classic is based on a theme named Deliciously Blue. There are lots of contributed Zen subthemes listed in Zen subtheme. Basic is another starter theme sold as a simplified version of Zen.

Similar base themes

Aardvark and Basic use a similar layout. Basic started as a cut down Zen and Aardvark was enhanced with the layout technique from Basic.

Regions

The available regions are header, navigation bar, content top, content bottom, left sidebar, right sidebar, footer, and closure.

Validation

This Zen passes the XHTML 1.0 Strict validation at W3C plus WCAG levels A, AA, AAA, and US 508.

The theme also fails the CSS2 test at W3C.

Example HTML

Here are example HTML elements to see how they are formatted by this theme.

<a href="?x">link 1</a>: link 1 This is a test of a link you have not visited. See how links are highlighted. Hover your mouse over this link to see any hover effects that might be used then select the link to see the link displayed as visited.

<a href="?y">link 2</a>: link 2 Leave this link unselected as a comparison link you have not visited.

<abbr title="abbreviation">abbr</abbr>: abbreviation

<acronym title="Cyclic Redundancy Checksum">CRC</acronym>: CRC

<blockquote>blockquote</blockquote>:

blockquote

<cite>cite</cite>: cite

<code>code</code>: code

<div>div</div>:

<form> and <input>: The the comments form at the end of this page (if you are logged in).

<em>em</em>: em

<h1>h1</h1> is usually the top heading in the page. Repeating h1 in this test would break heading nesting.

<h2>h2</h2>:

h2

<h3>h3</h3>:

h3

<h4>h4</h4>:

h4

<h5>h5</h5>:

h5

<h6>h6</h6>:

h6

<hr />:

<ol><li>li</li></ol>:

1. li

<p>paragraph</p>:

paragraph

<pre>.h3
      {
      font-size: 1.17em;
      }</pre>

.h3
      {
      font-size: 1.17em;
      }

<q>quote</q>: quote

<span>span</span>: span

<strong>strong</strong>: strong

<table><thead><tr><td>th1</td><td>th2</td></tr></thead>
<tbody>
<tr><td>td1</td><td>td2</td></tr>
<tr><td>td3</td><td>td4</td></tr>
</tbody>
</table>:

<ul><li>li</li><li>li</li></ul>:

• li
• li