header photo

via positiva

css

Bitten by the CSS Bug

So I couldn't sleep last night. What did I do? I went to Free CSS Templates and downloaded a CC 2.5 CSS skin. And I made a new Drupal 6 theme. This is easy enough that it could turn into a habit...

Download the theme

Styles On a Train

This week, Matt and I have been in Chicago working with the folks from After School Matters, an amazing organization that puts together tons of after school learning projects for the city's high school students. As part of the process, we took them through building Drupal modules, converting a static HTML/CSS design to an active Drupal theme, and so on. I'd never seen the latter in action (or at least, I'd never seen it done as quickly as Matt was able to) and I was impressed. So, I decided I'd do something I've been meaning to for a while.

Movable Type is a venerable blogging/web publishing tool that's been around since the early days of blogging. TypePad runs on it, and until I found Drupal, it's what ran Via Positiva as well. It has a lot of downsides, but one real strength is an active community of CSS designers cranking out new layout styles for it. Since Movable Type tends to have a very structured HTML output, and most people stick to skinning that with CSS, I always thought it should be relatively easy to make a Drupal theme that outputs the right MT-compatible HTML to use those styles.

So. On the train rides to and from the city, I did it. Most of the tricky stuff involved overriding certain Drupal theme functions in template.php to ensure our 'helpful' default styles didn't collide with Movable Type's. Once that was in place, though, I started downloading MT styles from sites like The Style Archive and dropping them in. Lo and behold... they worked!

A few styles are unhappy when they don't see VERY specific MT structures there (like the 'categories' sidebar) but the vast majority work nicely, and many even intelligently adjust to Drupal's flexible appearing-and-disappearing sidebars. The net result is that hundreds of existing Movable Type visual styles can now be used with Drupal.

It's a really awesome example of how Drupal's flexible templating system allows it to adapt, squeezing into more restrictive structures when necessary. And tinkering with it has helped me feel a bit more confident when messing around with complicated bits in the templating system. Hooray for open source!

styles.gif

On the complexity of Drupal theming

Those who know me know that I am official consumer of the kool-aid when it comes to Drupal. It is, after all, the best CMS on the market. There have been quite a few threads on the Drupal site, though, discussing the dearth of good themes available for folks who want a swanky looking site. Those who dive in and try to build their own without considerable experience tend to run screaming. Or, if they persevere, end up with a slightly modified version of one of the core themes like Grey_Box. (For this blog, I just grabbed one of the more attractive themes and haven't bothered customizing it. Rolling my own theme is on the to-do list, but what a loooong list it is...) Anyhow, I spent some time looking around at some of the highly visible "showcase" themes for blogging software like WordPress and Movable Type.

What I started to notice was a trend: the themes that got lots of attention, the ones that rise above the crowd, fall into two rough categories. Either they're highly customized for a particular approach (a photo-blog organized by photographer, for example), and thus unsuitable for general use, or they focus on flexibility and compatability with third-party plugins. In the world of Movable Type and WordPress, it's a foregone conclusion that connecting your blog to your de.licio.us favorites or adding a 'quote of the day' in the sidebar will involve wading deep into templating languages and perhaps Perl or PHP.

One of the snappier WordPress themes, K2, boasts features like "compatability with multiple authors" and "Showing the latest comments." A lot of work has gone into making K2 flexible enough to deal with more than one or two configuration scenerios, and the work shows.

What really struck me, though, was that any Drupal theme released without that sort of flexibility would be sent back to the drawing board as broken. New modules are released almost daily, shoving new content types and new presentation paradigms and new tools and options into the Drupal framework. The Drupal themes one can download from the main site take them in stride thanks to the tremendously flexible PHPTemplate system that (almost) everyone now uses.

I've thrown together quickie themes for Drupal that make all sorts of assumptions (we'll never had sidebars, we don't need to display comments, only Module X and Module Y will ever be installed...) and it's as easy as any other system. Easier, in some cases. In about twenty minutes , I whipped up a very rough 'compatability theme' that lets a Drupal site use CSS skins originally designed for Movable Type blogs. But making a theme that's visually stunning, cleanly designed, AND flexible enough to handle anything J. Random User installs into their Drupal build can be a pretty daunting task.

I suppose this post is both a defense of Drupal's relative deart of themes and a challenge. Should we simply resign ourselves to the fact that Drupal installs will either use simple CSS skins, or elaborate site-specific layouts? How can we, the Drupal die-hards, figure out ways to make the 'middle ground' more approachable?

Syndicate content

Miniblog

  • Totally got the third item in that list from @blakehall btw. He's the clever one! 1 hour ago
  • There are two hard problems in CompSci: optimal cache invalidation, naming things, and off-by-one errors. 2 hours ago
  • OH: "Well, the Title title can just be the title, but reign_title can't be the reign title, or the title title." 5 hours ago
  • Know Drupal? Dig wrestling? Looks like the WWE is hiring... http://j.mp/bSu4pB 2 days ago
  • I want to be the Malcolm Gladwell of Drupal APIs. My breakout book will be named 'Clear Cache.' 4 days ago

SXSW Interactive 2011!