The Zen Theme

Recently I did a presentation about how you can 'bend' the Zen Theme to make it your own (view the presentation intro here). The zen theme has a lot of cool features that I have always liked in theming. The more I work with it, the harder it is for me to build a theme from scratch. Here's what I love about the Zen Theme.


ZEN BLOCKS

One particular feature that I like from the Zen theme is the roll-over edit boxes on the blocks. This makes it very easy to edit your blocks. This feature alone is worth keeping in all new themes that I work with. Here's why:

  • Without this funciton you must navigate through the administration menu along a path something like this: Administration > Site Building > Blocks. This doesn't sound like much, but it's 3 clicks compared to simply clicking on the edit button on the actual block itself.
  • The Blocks Page: This page lists ALL the blocks used in your site. It is very easy to get a very large number of blocks listed on this page. Sometimes it is difficult to find the block that you would like to edit. Therefore, clicking edit on the block that you are looking at is significantly easier than searching through this ever-growing list.
  • Viewing Changes: When you change a block, generally you make the changes, save it, then navigate to the page that displays the block. If you decide it's not quite right, you have to navigate back to the blocks listing page, sort through all the blocks to find the one your editing, make the changes, then navigate back to where this block is displayed. You are very likely going to have to repeat this process a few times until you get it right.

ZEN REGIONS

The Zen Theme breaks down the regions to a point where there is so much flexibility, you almost never have to create a new region for ANYTHING. In the slide show, you will see all the regions that Zen gives you. This is the minimal number of regions required for the maximum flexibility. These regions allow you to place blocks anywhere in your template without editing the actual template files. I do find myself editing the template files, but rather than hacking them to death, I simply move a region from one place to another to get the exact look that I'm going for.


ZEN STYLE SHEETS

The Zen Theme is created with beginning themers in mind. The style sheets are heavily commented. This makes it easier for you to find the div IDs and classes that you want to edit for your custom theme.

The Zen Stylesheets also account for IE 5 and 6. The page.tpl.php file is commented out to re-direct any Internet Explorer users to the ie.css. You can customize this style sheet with all the necessary changes to ensure that your theme looks the same in Internet Explorer as it does in Firefox or other browsers. By putting an underscore "_" before your style, it targets that style specifically to IE 5. This is also very important because of the differences in how Internet Explorer 6 and Internet Explorer 5 render pages. They're not only different from other browsers, but also very different from eachother.


OTHER MODULES

Here are some other modules that I would recommend when theming.

  • Devel Module: This module should NEVER be used on a production site. This is only for development. The best thing for themers about this module is the Theme  Developer. This module inside the Devel Module will tell you what you should name custom template files so that Drupal will read them as you would intend them to be read. Drupal utilizes a naming convention for deciding which tpl.php file to render the page in. If you follow this naming convention, Drupal will automatically read a template file that you create for a specific page, node, or content type and display the proper template.
  • PNG Fix Module: This module allows you to dedicate certain Div ID's through a script that will render transparent PNG files properly in IE 5 and 6. Try not to get too crazy with these because there is a limit to the number of tags you can assign to this. This is, however, a very useful tool to ensure that your theme is displayed properly on different browsers.

I know there are other helpful theming modules. Feel free to leave a comment about a theming module that you think other themers should know about.

Comments

Powered by Drupal, an open source content management system