Training: Advanced Drupal Theming

Facilitated by Neil Drumm, MAPLight Developer, Drupal developer, api.drupal.org, drupal.org theme.

Neil maintains the drupal.org theme, and will answer all questions regarding Drupal theming, while also surveying changes to theming in Drupal 6.

Tips

• Blocks_class module allows you to add classes to blocks through the UI
• If you're using hook_block, you can use strings for deltas

Resources

• w3schools
• DrupalDojo
• Drupal theme guide

Modules

• WYMEditor (what you see is what you mean editor written in jQuery)

Adding a link to a great presentation that was given at DrupalCon 2008 Boston called Scalable Theming for 100s of node types original session description and videos online

Notes

What makes a good themer? Patience with dealing with IE. Knowing drupal - how things are put together. Knowing what you need. CSS skills are essential. Wrangling Drupal to provide the right markup.

How do you get from a design to a theme. Don't give HTML, give the photoshop mockup. You don't want to be changing Drupal's HTML. Zen theme as a base for their work. In drupal 6, the templates in core - copy them over to your theme. page.tpl.php. Can do alot with CSS.

Don't try to extend Garland. The links in Garland have been observed not to work in usability studies - not where people know to look.

Drupal 6 - hook menu alter.

If you have a themable module - telling the theme system what functions exist.

31 file style tag bug in IE 6. If you have more than 31 style tags it will break the site. But there is the aggregate function that can aggregate them to solve that problem. Fixed in 7.0.

Drupal for Facebook - drupal module that allows you to convert drupal stuff into facebook stuff.

Things that are problems: signup, panels things that don't have theme code in them. You can do through CSS - but you have to declare stuff in CSS.

YSlow is a great tool to rate speed on 8 different criteria.

Issues between designers and themers - making sure that the design takes into account how drupal works. It's important to know when you should do what. When to use CSS, or when to use other things.

Pick specific pages to design. Most important screens to design, then extrapolate to other

Floats and padding screw up in IE - calculated differently. - if things go outside the size of the box.

Test at each step to make sure you don't get stuck later. Start with a blank CSS file, and add styles. Use Zen theme as a basic. IE conditional comments - below all of the other stylesheets. Some situations where you can't get it completely right. And you have to make decisions about how to deal with specific issues.

A lot you can do with overrides. Hacking the page template - really powerful. View theme API in views 2. Name theme function by field name in a view. Things that provide IDs by number which can change arbitrarily. Block deltas should be strings. Block class module - assign a specific class to a block, and then style the class.

W3schools site - is a great place to learn CSS. Drupal Dojo is a great place to learn Drupal.