In Lullabot Podcast 46, Jeff Robbins interviewed the Australian team of developers from the 2007 Full Code Press competition. The Drupal team in that competition narrowly lost to the 'custom CMS' team, and one of the things that threw them off was the combination of the contest's tight deadlines... and Drupal's notoriously difficult-to-override menu related CSS rules. Think about it: a contest was designed to show off tools make the best rapid development system for web sites, and Drupal's menu-related CSS ended up dragging the designer down rather than helping. That should be a sign to us that something needs fixing.

The underlying HTML that we generate when building menus isn't bad. Rather, it's the extremely specific rules that core applies to control subtle things like indentation, spacing, bullet icons, and so on for all the menus it generates. Overriding these styles using normal CSS cascade rules is nightmarish, because they're extremely specific -- and CSS gives precedence based on how specific a rule is. In addition, Drupal's menu related CSS rules are dumped into the general 'system.css' file, with everything from tabbed navigation CSS to the rules needed to make draggable textareas work. Simply writing a PHP snippet in template.php that hacks out system.css would break lots of other stuff.

Fortunately, fixing this problem appears to be really easy: so easy, in fact, that we can do it without breaking any APIs and without requiring any new syntax for theme developers. This issue on Drupal.org first splits out just the menu-related CSS rules into a separate system-menus.css file. Then, it cleans up the mechanism by which themes can 'override' other style sheets with their own copies. If a themer wants to entirely replace Drupal's menu styles, they can just copy system-menus.css into their theme directory, add it to their theme's .info file, and change it completely. Drupal will ignore the core version of that CSS file, using the theme's instead, and themers will no longer have to grapple with ugly CSS specificity hacks to make their menu tricks fly.

We've made lots of improvements to Drupal 6's theming system, and the ability to build 'pure' CSS themes using images, .css files, and a descriptive .info file, has the potential to put Drupal theming within reach of a wider range of designers and web artists. Please test it and give it a spin: if we can get this committed, the tiny change will make D6's killer improvements even more powerful.

Comments on this post will automatically be closed three months from the original post date.