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.
- 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.
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.
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).
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: