tHOUGHTS & iDEAS

In my previous post I discussed about making use of Zen theme and zenophile module for theming on Drupal. Initially it was sort of a nightmare for me to understand the overall process and the structure, but with a struggle of about a week I managed to get most of the things sorted out. Now it only takes me less than two days to fully convert a site’s design (image) into a cross browser compatible, standard compliant CSS template. All this was made possible as a result of making use of Zen theme as the base theme.

Structure

If I talk about the structure of the Zen theme, initially what you’ll see is that it consists of CSS files, PHP files(xxx.tpl.php), one sitename.info file, other supporting javascript(if used) and image files. Each CSS file(In this article i’ll focus more on CSS styling) holds a specific set of CSS rules to manage one aspect of the web page’s presentation layer. To name them:

• layout.css: to manage the theme’s structural layout
• html-elements.css: to format the html elements
• sidebar.css: to manage the structural layouts of sidebars and content areas
• menu.css: to apply menu specific style formatting
• sitename.css: to apply overall site specific style formatting
• sitename-fresh.css: to apply special formatting
• print.css: to format the print view

Method to use

In my approach I always starts applying (overriding the existing formatting values) CSS rules with html-elements.css followed by sidebar.css. Once that is finish you’ll notice that what’s remaining will be to apply the section specific CSS rules. For that you can use the layout.css and sitename.css files. Lastly I touch on getting the menu styled using the menu.css. Following the above steps helped me to achieve nearly 99% cross browser compatibility among A grade browsers and with minor fixes for IE 7 and IE 6.

Menu

For sites having the navigation hierarchy stretches for more than one level I would recommends to always skip the use of navigation bar region(I’ll talk about what regions are with reference to Zen theme) and can make use of following two methods to get the vertical or hierarchical drop down menus to work perfectly with IE versions as well.

• Nice Menu module
• Method by Eric

The both approaches make use of the “suckerfish” dropdown implementation. My preference goes to the second method although you have to put an extra effort for it to works fine with IE (can overcome by correctly managing the z-indexs of different levels of the menu and the rest of the content).

Regions

Just to have a quick note about what regions means on Drupal with Zen theme (you can find simple yet comprehensive articles written about regions on Drupal.org). If you look at the internal operations of the framework you can categorized them into two layers based on how it handles the content.

• Presentation layer – it handles how the content is shown to the user.
• Generation and transmission layer- it handles how the content gets generated and transmitted among each other.

The Zen theme provides you a set of sections(regions) to position your content on the web page as follows: