This document provides tips for theming websites with Zen 2. It recommends organizing stylesheet files by type (e.g. css, images) and using separate files for different sections rather than one large stylesheet. It also discusses Zen's flexible layout options including fluid or fixed-width designs and 1-3 column layouts. The document highlights how Zen's default layout is customizable and can be replaced if desired. It also covers using negative margins to create multi-column layouts and the importance of information architecture including setting main and secondary navigation links.

1. Mastering Theming
with Zen 2
John Albin Wilkins
JohnAlbin
twitter: @johnalbin

2. Zen 6.x-2.0 is out!!!

3. Organdized!
Keep your theme directory clean.
• css
• images
• js
• templates

4. One stylesheet
to rule them all

5. One stylesheet
to rule them all
• Hard to find anything.

6. One stylesheet
to rule them all
• Hard to find anything.
• Too much scrolling!

7. One stylesheet
to rule them all
• Hard to find anything.
• Too much scrolling!
• Developers use separate files

8. One stylesheet
to rule them all
• Hard to find anything.
• Too much scrolling!
• Developers use separate files
• Sauron was evil. Don’t be evil.

9. 30 stylesheets! ZOMG!
• block-editing-rtl.css • layout-liquid-rtl.css
• block-editing.css • layout-liquid.css
• blocks.css • messages-rtl.css
• comments.css • messages.css
• drupal6-reference.css • navigation.css
• fields.css • nodes.css
• forms-rtl.css • page-backgrounds.css
• forms.css • pages-rtl.css
• html-reset-rtl.css • pages.css
• html-reset.css • panels-styles.css
• ie.css • print.css
• ie6-rtl.css • tabs-rtl.css
• ie6.css • tabs.css
• layout-fixed-rtl.css • views-styles.css
• layout-fixed.css • wireframes.css

10. 30 stylesheets! ZOMG!
• blocks.css • navigation.css
• comments.css • nodes.css
• fields.css • page-backgrounds.css
• forms.css • pages.css
• html-reset.css • panels-styles.css
• ie.css • print.css
• ie6.css • tabs.css
• layout-fixed.css • views-styles.css
• messages.css

11. Which stylesheet first?

12. Which stylesheet first?
• html-reset.css — I don’t like reset stylesheets.

13. Which stylesheet first?
• html-reset.css — I don’t like reset stylesheets.
• layout-fixed.css — This is just the default.

14. Which stylesheet first?
• html-reset.css — I don’t like reset stylesheets.
• layout-fixed.css — This is just the default.
• Most stylesheets are grouped by the template
file.

15. Which stylesheet first?
• html-reset.css — I don’t like reset stylesheets.
• layout-fixed.css — This is just the default.
• Most stylesheets are grouped by the template
file.
• And, yeah, IE still sucks — so you need a fix for
the IE 31 stylesheet limit:
http://drupal.org/project/ie_css_optimizer

16. Brief overview of Zen’s Layout method

17. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.

18. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.
• Flexible layout options:

19. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout

20. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar

21. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar
• 1-3 columns built-in. More columns are possible without
mind-bending contortions.

22. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar
• 1-3 columns built-in. More columns are possible without
mind-bending contortions.
• Zen’s default Layout Method is completely pluggable. If you don’t
like it, just replace the layout.css file with your own layout

23. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar
• 1-3 columns built-in. More columns are possible without
mind-bending contortions.
• Zen’s default Layout Method is completely pluggable. If you don’t
like it, just replace the layout.css file with your own layout

24. Brief overview of Zen’s Layout method
• Source-ordered HTML: The importance of the pieces of content
determines the order in HTML, and not the graphic design.
• Flexible layout options:
• Fluid (100% width) or fixed-width layout
• Optional horizontal navbar
• 1-3 columns built-in. More columns are possible without
mind-bending contortions.
• Zen’s default Layout Method is completely pluggable. If you don’t
like it, just replace the layout.css file with your own layout

25. Negative Margins
(and positive results)
( These blocks have float: left; )

26. Negative Margins
(and positive results)
( These blocks have float: left; )

27. Negative Margins
(and positive results)
( These blocks have float: left; )

28. Negative Margins
(and positive results)
( These blocks have float: left; )

29. Negative Margins
(and positive results)
( These blocks have float: left; )

30. Negative Margins
(and positive results)
( These blocks have float: left; )

31. Information
Architecture

32. Information
Architecture
• Set the source for Main & Secondary Links.

33. Information
Architecture
• Set the source for Main & Secondary Links.
• Even with separate navigational areas, try to
keep most links in the Main menu.

34. Information
Architecture
• Set the source for Main & Secondary Links.
• Even with separate navigational areas, try to
keep most links in the Main menu.
• Use “Menu block” module!
http://drupal.org/project/menu_block

35. Accessibility
• Skip navigation links
• .element-invisible class for making content
visually invisible, but still accessible.
• Heading navigation means your blocks need
headings!

36. Ask me anything
@JohnAlbin