Header block body. This block shows you what a block looks like in the header region and does not have a title because the title heading would cause a WCAG AA heading nesting error.
Content top block title
Content top block body. This block shows you what a block looks like in the content top region.
LiteJazz
LiteJazz is fluid, yeah!, and reaches WCAG AA with a little modification.
This LiteJazz is 6.x-1.7 from 2008-Sep-09, a 93.11 KB download, plus the following changes.
There are some errors in need of a fix before the theme validates as XHTML 1.0 Strict. The errors are reported in drupal.org/node/321205.
The following line in page.tpl.php produces duplicate top level elements.
<div id="primary" class="clear-block"> <?php print theme('menu_tree', menu_tree('primary-links')); ?> </div>
The problem is caused by menu_tree() calling menu_tree_output() and menu_tree_output() applying theme() before returning the menu data. Replace the faulty line with the following line. This page contains the change.
<div id="primary" class="clear-block"> <?php print menu_tree('primary-links'); ?> </div>
Spans cannot contain the full range of elements allowed in divisions. The taxonomy term list contains elements not legal in a span. node.tpl.php contains the following line in need of a change.
<span class="taxonomy"><?php print $terms?></span>
Change it to:
<div class="taxonomy"><?php print $terms?></div>
The next change is to fix an error that is shown by the TV XHTML validation. The following line in page.tpl.php generates whitespace that is illegal based on the schema for XHTML.
<div id="navigation" class="menu <?php if ($primary_links) { print "withprimary"; } if ($secondary_links) { print " withsecondary"; } ?> ">
Replace the line with:
<div id="navigation" class="menu<?php if ($primary_links) { print " withprimary"; } if ($secondary_links) { print " withsecondary"; } ?>">
Inline styles need a default stylesheet language specification, which is hard for a theme, so I moved the inline style to CSS. The following line occurs four times in page.tpl.php and contains the inline style.
<div style="clear:both"></div>
Change each of the four lines to the following.
<div class="clear-both"></div>
Near the top of page.tpl.php, where other styles are added, add the following style. This can be moved to style.css.
<style type="text/css">
.clear-both
{
clear: both;
}
</style>
Bingo, you now have a theme that will validate to XHTML 1.0 Strict, WCAG A, WCAG AA, and US 508. WCAG AA is the hardest. Anything that passes WCAG AA will pass everying else except WCAG AAA and WCAG AAA adds tests that can only be performed by a human, not a computer.
If you are not used to editing template files, download litejazz.zip for LiteJazz 6.x-1.7. The file contains the modified page.tpl.php and node.tpl.php files used in this page.
Example Site
A healthy being .com is about natural long term health and uses the simplest theme necessary to provide the required features. For many years the site used a custom theme and the developers were looking at a lot of work to add one extra feature already in LiteJazz. The developers copied LiteJazz then modified LiteJazz to work the same as the existing theme, gaining all the extra features of LiteJazz. Today the same developers would create a subtheme of LiteJazz to get all the features of LiteJazz and to reduce theme maintenance by being able to easily upgrade the base theme code whenever LiteJazz improves.
A healthy being .com recently moved to a base theme/subtheme structure chose a different theme as the base because they did not need all the features of LiteJazz.
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>:
- 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>:
| th1 | th2 |
| td1 | td2 |
| td3 | td4 |
<ul><li>li</li><li>li</li></ul>:
- li
- li
Content bottom block title
Drupal 6 Social Networking
