Sustainable Themingwith Zen
Kathleen MurtaghDesign 4 Drupal – June 13, 2009
A big Thank You to Colleen Carroll and Palantir for the 'sustainable' conceptand John Albin for his work on Zen
What is 'Sustainable Theming'?
Implementing a theme that grows virtually on its own as the site grows
Reducing time spent on the theme layer
Working with Drupal and not against it
Why Theme Sustainably?
Save time in development
Ensure the client always sees a good looking website during testing
Enable the client to add new sections and features or move objects post-launch
Work with Drupal
Put aside the desire to use your own meticulously developed custom HTML and preferred class names
Embrace Drupal's HTML output and become primarily a CSSer
Use Zen
Using Zen as a base theme saves you time
Provides fixed and fluid, SEO optimized layouts
Equalizes HTML elements across browsers
Styles common elements like tabs and messages
Adds additional CSS classes to templates
Let Zen do the tedious work for you
Set up your Zen sub theme
See handout for step-by-step instructions
Notable changes:
Do not edit layout.css
Do not copy over the html-elements.css file
Start with a blank mytheme.css file
Find the Common Denominator
Little red links
Red block titles
Grey border box
Large orange block header
Find the Common Denominator
Little orange links
Grey border box
Large orange block header
Little red links
Thin grey block header
Find the Common Denominator
Large orange block header
Red block titles
Little orange links
Shaded border box
Find the Common Denominator
Thin grey block header
Little red links
Pink table header
Light pink background
1px white borders
Find the Common Denominator
Red Block Titles
Pink table header
Light pink background
Thin grey block header
Little red links
1px white borders
Progressive Enhancement
Build for the common denominator
Then progressively add enhancements
Structuring your Stylesheet
Group your styles by purposeLayout, content type, fields,
visual elements
Break your stylesheet into multiple filesDon't let a 1000+ line
stylesheet bog you down!
Code to Save Time
Use multiple CSS selectors for the same group of styles
Target elements using general selectors
Use consistent naming schemes
Theming Views
Use general views templates before view- or field-specific templates
Target CSS selectors for view style before using view-specific selectors
Use 'fields' instead of 'teasers'Caveats apply...
Theming Nodes
Before creating content type templates...
Optimize the display of CCK fields
Create field templates where appropriate
When creating templates for content types...
Optimize node.tpl.php first
Use the same template for multiple content types
Gently Modify Templates
Maximize existing HTML in the default templates
Change your CSS approach
Minimize modifications when making edits
Add a new class or wrapper
Post your template change requests to the module's issue queue!
Once you have created a
Sustainable Theme
Sit back and relax.
Your building blocks will allowthe website to grow on its own
