The theming firehose (NB for designers & front-end developers new to Drupal)

Drupal markup in a Wordle

You theme with the mark-up you have, not the mark-up you'd like to have.

That's the essential truth that designers and front-end developers new to Drupal need to understand. You don't get to construct your pages from scratch, building out essentials, never a wasted div, never an extraneous class. No, you have to flip the entire process around. With Drupal you're getting markup shot at you from a firehose, and as a themer you need to sop it all up and make it pretty. Don't spill a drop.

What this means is that, by default, you're spending a lot of time debugging the theme you're building so that it handles all the different configurations, content types, page structures, etc. that the Drupal site is throwing at you.

You have to be braced for it. It can be overwhelming. You can feel like you're drowning. Don't worry. You'll get used to it after a few months. Mostly.

Make friends with Firebug.

But wait, can't this situation be changed?

Well, kind of. You can intervene in the mark-up. You can write your own page templates. Your own fields templates. Your own views templates. Your own search templates. Your own node templates. Your own comment templates. But be warned: You're going to be working against a ton of mark-up. And you'll need to know some PHP to add your own variables — mighty powerful and nifty, but your Dreamweaver chops aren't going to help much.

You see, Drupal aims to be flexible, and it does that by throwing a zillion divs, spans and classes into the output. That means if you're not expert at CSS, you're going to be lost adrift in a sea of markup, and if you are expert at CSS, you have to learn how to see through the clutter — because when you have four or five nested divs to contain one single element, it's not necessarily obvious which one to target with your CSS. Especially if there's some nefarious Drupal core CSS already at work.

There are endeavors to make Drupal mark-up better, including in the HTML5 Initiative. But that's a slow process, and it sometimes meets heavy resistance.

Meanwhile, to get sites themed now, you may have to change how you work. Change how you view the web “page”. Get used to being the html sponge, absorbing and directing the firehose, using only the drops you want and letting the rest by without touching a thing. Let go of the idea that you're building from scratch, and get used to the mindset of diagnosing what's already there.

That's the price of power. Drupal is incredibly powerful. You need to flex your theming muscles to match what Drupal throws at you. Work through the complexity. Trust in Firebug. And don't despair. In the end, the resulting webapp is orders of magnitude bigger and badder and more kick-ass than what you could have done on your own, having 100% control but going it alone.

Internet Explorer 7, oh dear!

So far, all the buzz is pretty much about IE7's "new" features like the tabbed browsing that other browsers have had for years now, with some mention of the upcoming Firefox 2 release.

But just wait until websites start breaking. Internet Explorer has always required non-web-standard hacks. The net effect of this has been my thumbnail estimate of 30-40% of loss of productivity in the web design field while developers work around Microsoft's "we don't need no stinkin' standards" attitude and break out the duct tape and chewing gum to make sites that work in every other browser work in IE.

IE7 honors some more web standards, but still has its own quirks -- some new ones, apparently.

Let the kvetching begin!

Sometimes a little redesign is necessary

I just went and did it: a little css reboot. I just couldn't take the drab look of this place any more. Really, the old theme was an embarrassment. My apologies are offered in advance to those of you on dial-up for whom this page will take some 40 seconds or so to load fully. The graphics should all be there by the time you finish reading this post -- Evelyn Wood graduates excepted.

The theme is powered by phpTemplate. (I'm still running Drupal 4.6 here.) The photograph is mine, shot in Colorado. There are more where that came from on my photoblog.

CSS Reboot Spring 2006 Lucky for me there's an occasion for this. I saw the CSS Reboot happening last year, but it was a total coincidence that this little redesign is coinciding with the current "event."

Alas, this site is not validating right now. Grrr! Part of the problem -- most of it -- is because I blog using ecto, which doesn't quite generate valid strict xhtml -- or at least it doesn't with the settings I'm using. But I'm sure one or two of the errors are in my Drupal theme template files themselves. (If I were a petty soul, I'd be gratified that I'm getting fewer errors than the CSS Reboot site itself. But I'm only petty enough to mention it without any joy.) I'll try to clean things up before the May 1 deadline. Because even though I did this for myself, the site really should validate.

But it's late. I'm tired. I have work to do tomorrow, and for many tomorrows after that. Hopefully I'll find some time before tomorrow is yesterday.

(Okay, dial-up visitors. By now the background images should have loaded by now. Do you like it?)


Get occasional email updates on what I'm doing (and not blogging about).

Powered by MailChimp

Subscribe to xhtml