admin's picture

Creating sub-theme with Zen

I start each of the new projects by downloading and instaling the Zen theme. It's very clean and pure, and I always use it as a base for the front-end development and styling.

Some of the futures include:
- Well documented php and css files.
- Lots of easy-to-access classes and ids for CSS developers.
- Classes on body include items like "logged-in", "not-logged-in", "front", "not-front", as well as the node type ("node-type-story", "node-type-blog", etc) for single node pages. This can allow CSS developers to do things like have a different color for a given page item for non-logged-in users, have a larger header section on the front page, or put a different background color on a given node type.
- Automatic (table-less) column resizing for 1, 2, and 3-column layouts.
- Separate layout.css file to allow for changing the type of column layout (holy grail, jello mold, etc).
- A print.css file optimizes print display automatically when sent to a printer — removes, sidebars and nav elements, optimizes font size, adds text to links showing href, etc.

After instaling Zen, the first thing I do is to create the sub-theme. Read excellent documentation: How to build your own sub-theme (6.x-2.x) to guide you through the process.

There are many reasons why you should use sub-theme instead of hacking the core (yes, more than life of poor kittens :-). Some serious ones are listed here. The less serious one is: when handing over the project to the clients I like them to feel I developed a theme especially for them with the name of company (instead of meaningless zen). But that's just me :-).

You can also theme other parts of the website. Copy the *.tpl.php files to your sub-theme folder, edit them leaving the core templates intact. Here you find the list of core templates to override.

Issue: I did discover one issue with the zen sub-theme. In the css folder you will find 31 css files. Then you should add all the css files that come with modules. The css files loaded per page will quickly extend the maximum of 31 which is allowed by IE. What will happen is, the IE will load only the first 31 css files and skip the rest cousing the layout problems.

There are several ways to solve it:
- swith on the css optimization on Performance admin page - it works, but I find it very unhandy during development process
- use IE Unlimited CSS Loader module - works great, after you are done with development, you can de-install it and use css optimization
- limit the number of css files in sub-theme css folder and edit the sub-theme .info file to load only necessary files.

Tags: