FIRST MODIFY THE SETTINGS THAT ARE GIVEN VIA THE WEB ADMIN e.g. Theme configuration

http://test.dawhippytoy.com/admin/build/themes/settings/ Here you can choose whether to display the "Theme" Primary Links (appears just below the header section)... (I think it's best to uncheck it and use Blocks instead...)

http://test.dawhippytoy.com/admin/build/block Block layouts is where you can put the Primary links up at the top and Secondary links at the bottom.

THE NEXT BEST STEP IS TO INSTALL THE FIREFOX "FIREBUG" PLUGIN which allows you to "peek" at the html & css source and figure out exactly what code controls what... http://getfirebug.com/downloads

THEN YOU CAN BEGIN MODIFYING layout.css

1. LOOK AT THE SOURCE CODE FROM YOUR UNMODIFIED SITE (with Firebug too...)

e.g. line 37 of the home page

<div id="header-blocks" class="region region-header">
      <div id="block-menu-primary-links" class="block block-menu region-odd even region-count-1 count-2"><div class="block-inner">

WE FIND "menu-primary" in zen.css

To "override" the default zen.css all we have to do is create our own version in layout.css

block-menu-primary-links / "Primary links" block /

{ font-size: 16px; }

To take advantage of the "nested" control principle, so any links in div "block-menu-primary-links" will now be red, we add the following to layout.css (with comments explaining it too, of course!)

#block-menu-primary-links a:link

{ color: green; }

#block-menu-primary-links a:visited

TRY UPLOADING layout.css and forcing your browser to refresh... neat!

SOME ADDITIONAL EXAMPLES, ie A HORIZONTAL MENU

block-menu-primary-links / "Primary links" block /

{ margin: 0; padding: 0; }

/ this means by default ordered and unordered lists and anchors have no underlines /

block-menu-primary-links li ul,

block-menu-primary-links li,

block-menu-primary-links a {

text-decoration: none;

}

/ specifically "anchors" or links will appear as blocks /

block-menu-primary-links a {

display: block;

}

block-menu-primary-links a:links

block-menu-primary-links a:visited

Block takes up the full width available, with a new line before and after Inline takes up only as much width as it needs, and does not force new lines

Create an images folder to house all theme specific graphics. This way you have content images and theme images separated out for better file management.

1. MODIFYING ZEN CORE STYLESHEETS: If you decide you want to modify any of the other stylesheets in the zen folder, copy them to your sub-theme's folder before making any changes. Also, be sure the new stylesheet is included in your .info file, that you have rebuilt the theme registry, and that you have refreshed the .info cache.

   For example, copy zen/zen/block-editing.css to foo/block-editing.css. Then edit foo/foo.info and uncomment this line to activate it: ;stylesheets[all][] = block-editing.css to: stylesheets[all][] = block-editing.css Then, visit your site's admin/build/themes to refresh Drupal 6's cache of .info file data.

2. MODIFYING ZEN CORE TEMPLATE FILES: If you decide you want to modify any of the .tpl.php template files in the zen folder, copy them to your sub-theme's folder before making any changes. And then rebuild the theme registry.

   For example, copy zen/zen/page.tpl.php to foo/page.tpl.php.

3. THEMEING DRUPAL'S SEARCH FORM: Copy the search-theme-form.tpl.php template file from the modules/search/ folder and place it in your sub-theme's folder. And then rebuild the theme registry.

   You can find a full list of Drupal templates that you can override on: http://drupal.org/node/190815

   Why? In Drupal 6 theming, if you want to modify a template included by a module, you should copy the template file from the module's directory to your sub-theme's directory and then rebuild the theme registry. See the Drupal 6 Theme Guide for more info: http://drupal.org/node/173880

4. FURTHER EXTENSIONS OF YOUR SUB-THEME: Discover further ways to extend your sub-theme by reading Zen's documentation online at: http://drupal.org/node/193318 and Drupal 6's Theme Guide online at: http://drupal.org/theme-guide

Also easier to read version: http://john-pfeiffer.kittyandbear.net/category/blog-tags/drupal