Home / Comment permalink

UX improvements in Drupal 6: Theme system

This is the fifth blog post in a series about user experience improvements in Drupal 6. Drupal is very popular with developers who want to leverage the contributed modules to meet their feature requirements. Previous versions of the theme system have favored powerful theming through programming rather than simplicity for designers. Three significant changes to the theme system have reduced the need for designers to learn how to program to use some of the theme engines most powerful features. The addition of sub-themes and CSS and Javascript improvements also help themers with re-use and full control.

###An override file not a function
Themers no longer need to figure out how to program in PHP to override a theme function, they can just create a .tpl.php file.
###Call $variable not _phptemplate_variables()
Module developers can make variables directly available, like $variable, in template files.
###An .info file not a mytheme_regions() function
Themers can add a region to a theme by updating the theme's meta-data .info text file. The ability to add regions through a text file means theming a site could be done mostly through CSS changes.
###Effective theme re-use with sub-themes
Drupal developers flock to Drupal because they got tired of writing custom content management systems that they had to maintain alone. Sub-themes make it easier for themers to rely on a base theme like Garland or Zen, while extending it, rather than hacking the core of the theme.
###The CSS and Javascript you actually want
Previous versions of Drupal came with a mandatory base CSS and Javascript files, which often caused conflicts for themers. In Drupal 6 developers can override Drupal's base CSS files in a module, giving the CSS themers need to theme a particular module. Themers can also use a javascript override function.

Most of the changes impact the user experience for themers and site administrators. One change to the theme system that impacts users is the support for Right to Left themes so that users can read sites in their own languages. Further changes to the user experience will come in Drupal 7, with improvements to themes like Garland, and hopefully a specific administration theme.

For Drupal 6 there were also at least 32 unique contributors to 44 theme system improvement patches. These contributors include Earl Miles, Angela Byron, Steven Wittens, Antony Simmonds, Gurpartap Singh, Moshe Weitzman, Károly Négyesi, Khalid Baheyeldin, Larry Garfield, Joon Park, Karthik "Zen", Dave Trainer, Jean-Pierre Tavan, Jeff Eaton, Franz Heinzmann, Jon "Webavt", Derek Wright, Stefan Nantegaal, Daniel F. Kudwien, Nathan Haug, Florian Loretan, Kent Bye, Jiří Bernášek, Keith Smith, "Webernet", Alexander Hass, Wesley Tanaka, Bertalan Fodor, "Mooffie", "Snufkin", Chris Kennedy, "dmitrig01", Wim Leers

The following is a list of theme improvement patches in Drupal 6:

  1. #130366: Better styling for signature separator (thanks webchick).
  2. - Patch #130987 by merlinofchaos: added theme registry for easier themability.
  3. - Patch #135533 by asimmonds: updated themes to work properly with new language options.
  4. - Patch #132018 by Steven et al: add .info files to themes.
  5. - Patch #137211 by merlinofchaos: move theme information to .info files and improved theme inheritance.
  6. - Patch #142829 by webchick and gurpartap singh: pave the path to allow comment-.tpl.php.
  7. #144397: Use drupal_render for user profiles and convert to themer-friendly .tpl.php files.
  8. #146386 by kbahey: refactor 'submitted by user - date' themeing and make it more verbose to translate
  9. #141725 by Crell and dvessel: allow themes to define multiple CSS and JS files in their .info files, which can be clearly overriden
  10. - Patch #141730 by Earl: allow theming system to use wildcards. I promised in the issue that this patch would still go in, so here goes.
  11. - Patch #119821 by Zen and Dave Trainer: properly theme the statistics log table.
  12. #109363 by jptavan: CSS best practice; include a generic font family for Verdana fonts in Garland
  13. - Patch #158536 by merlinofchaos and dvessel: tpl-ified the forum module.
  14. - Patch #162134 by dvessel: tplify profile module.
  15. - Patch #161510 by dvessel: tplified user.module.
  16. - Patch #163723 by Eaton and Frando: fix default page.tpl markup (and removed some whitespace).
  17. - Patch #158536 by dvessel: more forum template massaging.
  18. - Patch #145218 by profix898, bennybobw, Crell, forngren et al: use href instead of @import for CSS.
  19. #165343 by merlinofchaos and dvessel: include path history in theme discovery suggestions, so we find subtheme files properly
  20. #134307 by dww, Stefan Nantegaal and dvessel: fix table headers interaction with Safari, so the fieldset contents will not disappear
  21. - Patch #162202 by dvessel: fixed CSS problems in Opera.
  22. - Patch #159936 by dvessel: tpl-ify block module.
  23. - Patch #160395 by dvessel and merlinofchaos: allow theme engine to register theme variable functions.
  24. #171963 by dvessel and momendo: fix background positioning in fieldsets in IE7
  25. #163361 by dvessel: fix hidden textareas in Opera and remove gap between textarea and grippie in Firefox/Safari
  26. #173082 by dvessel: tplify aggregator module, make more stuff themeable
  27. #180897 by sun: fix an XHTML validity error in Garland
  28. #177473 by chx, quicksketch, dvessel and merlinofchaos: make it possible for modules to add their own theme variable preprocess hooks and improve documentation on the different preprocess options
  29. #181564 by Crell: add first and last CSS classes to menu tree lists and themed item lists for themers to use
  30. #180588 by merlinofchaos: run tabs through theme('menu_item_link') compared to just l() directly, so they can be properly themed
  31. #180897 by sun and dvessel: fix various XHTML validity issues in Drupal by closing unclosed tags, avoiding empty table containers, and so on
  32. #147492 by flobruit: make 'more' links themeable
  33. #141727 by merlinofchaos, dvessel, sun: restore themeability support for maintenance pages (regression)
  34. #194369 by lots of contributors: move default files directory to sites/default/files which can be created automatically on install, so no need to bug the user about it, making the install process easier
  35. #193604 by hass and dvessel: fix color module to be able to use arbitrary styles, not just style.css, fixing Minnelli coloring and RTL CSS file coloring
  36. - Patch #40575 by Wesley: made it easier to theme the forum overview page.
  37. - Patch #162871 by merlinofchaos: poll module cleanup + tplified the module.
  38. #141727 follow up by dvessel: fix maintenance theme in updates
  39. #196667 (GHOP 45) by fberci: add '@ingroup themeable' to all themeable functions
  40. #197425 by mooffie, slightly modified: add blockquote support by default and blockquote theming to Garland and Bluemarine (other themes have it already)
  41. - Patch #129640 by snufkin: generate the sticky css tag when necessary.
  42. - Patch #125805 by dvessel: get rid of the search scrollbar.
  43. - Patch #164032 by Crell, Chris Kennedy, dmitrig01, WimLeers, dvessel et al: tpl-ified the search module.
  44. #160200 by dvessel and chx: better theming support for book module


Posted on by Rainer (not verified).

Best improvement for themers is the "Theme developer" that were added to the devel module. Never miss this one - it's great.

Posted on by Claude Gelinas (not verified).

The theme re-use with sub-themes makes it easier to customize one of the demo themes freely available — thanks for making it more straightforward.