web design

My DrupalCon San Fransciso session: Grok Drupal (7) Theming

Drupal theming is incredibly powerful, flexible, dynamic and granular, but it can be a bit of a challenge to understand without knowing the fundamentals.

The Way Drupal Theming Was

When I started Drupal theming in 2004, it was all a bit overwhelming. Back then, the core theme engine was something called Xtemplate, and it gave the impression to the n00b themer of being a great big mess. When you looked at the page template, it was one big blob of markup and logic, and it was very hard to figure out to change just about anything. What's more, it seemed to be very brittle: change something and you got the white screen of death.

And thus life was for the themer through Drupal 4.5 and the beginnings of 4.6.

New Drupal Theming Power

Then, in 2005, came the PHPTemplate theme engine, thanks to Adrian Rossouw (now with Development Seed), and the heavens opened up.

Suddenly (well, not suddenly, as it took a lot of work) Drupal templating had a structural logic: a nested system that simplified the clutter, gave us defined variables to work with, and provided the basis for extending the system. This was really really cool — so cool that it immediately became the theme engine of choise, and, with Drupal 4.7, it became the theme engine for Drupal core.

I was so excited about it, I did my first Drupal conference presentation on it, at OSCMS 2007 at the Yahoo! campus in Sunnyvale. (It was part of a larger topic of overriding display upon which I collaborated with Greg Knaddison and Ezra Barnett Gildesgame, now of Growing Venture Solutions. The PDF of my slides are available here, though they're pretty outdated now.)

Since then the Drupal theming system has evolved and improved. There are a lot of nifty techniques, tricks, best practices that are available to the themer. What's essential is having a good understanding of the underlying architecture, because that's how you can figure out where to look, how to go about making the changes you want to make the theme yours.

No PHP knowledge is required ... beyond knowing not to muck with what's between the <?PHP ... ?> tags. Of course, knowing some PHP can help. But you can also pick up the basics as you go, if you want to delve into the coded bits.

Learning Drupal Theming in 2010

My session proposed for DrupalCon SF on Drupal theming basics brings a comprehensive look at the Drupal theming system and how the front-end developer new to Drupal can take charge of the output by taking advantage of what Drupal gives you.

You won't come out an expert — that would be a ridiculous promise — but you will come out able to start rocking your own themes. You will have a solid understanding how the Drupal theme is structured, how the various templates work together, how to define regions, how to add your own targeted CSS files and scripts, use of subthemes, some good base themes to work from, how to do custom overrides of obscure, quirky or persnickety output using preprocess ... and you'll grok theming in such a way that even if you don't know how to do something, you'll know how to go about figuring it out, where to look, what to change, etc.

And because we're about to enter the age of Drupal 7, this presentation will be about these things for Drupal 7 (with some notes on how things have changed from Drupal 6). So this session could also be of interest to the experienced Drupal themer who hasn't had a chance to delve much into Drupal 7 yet.

Session voting is now open for DrupalCon SF, so if you think this session sounds helpful to you, or would be of use to the several hundred people new to Drupal who are expected to attend, please vote for my session, "Grok Drupal (7) Theming".

Thanks!

Web designers and developers, take the A List Apart survey

A List Apart Survey

The more the merrier (or at least more accurate). Take a few moments to fill out the A List Apart Survey. This isn't just for designers.

Drupal 7 freeze means time for a new tag: #D7DX

Yeah? Maybe?

[update: maybe not. see comments.]

#D7UX [Tweeted] is about Drupal 7 user experience work.

#D7CX [Tweeted] is about upgrading Drupal contrib modules to stable Drupal 7 releases when Drupal 7 itself is released. Over 100 contributed projects now bear this commitment, which is just awesome!

To me, that leaves #D7DX – a focused effort to get some rockin' Drupal 7 design themes going.

Yes, we have #D4D. And beautiful Drupal 7 themes are part of #D4D. But #D4D is also about Design 4 Drupal events, broader #d4d efforts on Drupal.org, and other design efforts that are happening. But why not a more focused tag, not on making Drupal pretty in general, not on improving the designer's experience in Drupal, but focused just on creating beautiful, semantic, exciting, eye candilicious themes for Drupal 7? For core themes, yes, but also for contrib. All ready and stable by Drupal 7 official release. Now is the time!

I'm writing to myself, here, since for someone who's been working with and designing for Drupal since 2004, I'm very late to the contributed theme party. That has to change.

At any rate, it's an occasion to finally get this blog here out of the Minelli realm. That's a long overdue effort. All I need is a little free time.

Yes.

Tweet Tweet!

A cautionary tale regarding theme download sites

Via GigaOM:

Back in November, we looked at WordPress themes being distributed by third parties who’d embedded hidden code to allow the insertion of arbitrary content. Now a rash of sites are reporting that their blogs have been subverted....

...There are lots of reasons a hacker may want to inject code into a page:

  • To infect visitors by exploiting a browser vulnerability
  • To place ads they can then get revenue from
  • To embed links to blogs they own, improving their page rank
  • To entice people to click on links that lead them elsewhere

The clever thing about the WordPress hack was that it would check for code to insert into a page each time it was loaded, but if none was available, it would just sit there quietly.

It's all too easy to compromise a website's security via the theming layer. Malice is just one possibility. There are also hacks and vulnerable code gimmicks pursued amateur theme developers who just don't know better. It's not just a Wordpress thing -- it's all websites, whether built on open source or proprietary platforms (though not static html sites, which presumably are as safe as their servers).

In this context, the question for the website owner is whether you want to buy a theme (or download a free one) from an un-vetted vendor. Sure, if you are an adept coder, and/or know the proper API calls to protect your site from things like XSS, you can just clean that up and enjoy the design that attracted you in the first place. But if you don't know those vulnerabilities, you could be opening your site up to ill-will or novice mistakes. Caveat emptor. Don't end up like Deep Jive. Ouch.

Firefox 3 making online life much nicer

Today I downloaded and installed Firefox 3 Beta 4. I could not do it before, but now that the Web Developer tools are updated and Firebug has a 1.1 beta that works in FF3, that's enough for me.

I don't know about you, but on both Macs I use regularly, Firefox 2 was crashing all the time. Last night, while writing a blog post for BlogHer, my browser crashed at least a dozen times. On my Mac Pro, Firefox completely melted down -- twice -- requiring complete rebuild from the start, manually adding one plug-in at a time. But I had to stick it out because I need those developer tools. I cannot imagine working without Firebug.

The new UI is clean, and seems to take up a bit less space. And so far FF3 is fast. Me likes.

An Apple Store a day keeps the dreadful designs at bay

So we learn from Secret Notes:

Apple's stylish stores and computers, all of which feature unrestricted Internet access, have become such the hang-out and gathering place for MySpace junkies that the powers that be have elected to block the popular social networking site from its systems.

By the close of business Thursday, most Apple retail stores will have implemented the block, designed to reduce the level of loitering at the stores.

More likely Apple's design aesthetic just cannot brook dreadful MySpace page designs appearing within their bricks and mortar.

The horror! The horror!

OSCMS theming presentation: request for input

I've posted a request for input from those attending the OSCMS Summit regarding the theming session. If you're attending, please respond there. Or here, if it's convenient. We want the session to address your concerns and interests, and your help is requested.

CSS reboot of pingVision

The design of the pingVision site was driving me crazy.

pingVision, the old view

It really wasn't supposed to be the actual site design, but rather a temp theme to be cleaned up and spiffed up a bit. 18 or 20 months later (I actually don't know exactly how much later) I finally got around to replacing it.

pingVision, the new view

It's certainly different. Cleaner. Simpler. Too simple?

I'd started on this new design several months ago, but left the theme half-done in order to focus on client work. Finally I just had to spend a weekend tinkering with it to get it live on the site.

This really was more of a starting over from scratch on the whole template, rather than just a CSS reboot. There might be some bugs in it -- I have yet to see it in IE7, and IE6 worked yesterday, but I made some changes since -- but there it is, in an unofficial live beta. Still to do (aside from debugging): update it and the site to Drupal 5, and update some of our main pages.

So what do you think?

It doesn't really seem right to add our own website design to our own portfolio so this is probably the only place I'll post this.

CSS: A house of cards built in code

And Internet Explorer just loves to knock it over. And that's enough said on that.

Firefox 2.0 not the website breaker like IE7 [updated]

[Update: I removed the direct link to the ftp site because, as small as rare pattern is, every little bit counts, and I don't want to hurt Mozilla.]

Get Firefox
As I write this, it's still not "officially" released yet, but I've just installed Firefox 2.0 after downloading it from the Mozilla FTP site (Mac versions here), and I'm loving it. I've not yet explored the preferences and all that, but so far nearly all of my extensions still work, including the web developer tools, Performancing and weather.

And so far no websites are breaking. Aren't web standards wonderful? I'm good to go. I can keep working (or writing this blog post), and not have to fret about mysterious problems.

Too bad the same cannot be said for users of Internet Explorer 7, which, with its new Microsoft-only quirks, is creating all sorts of new headaches for website owners and challenges for web developers. Some websites won't work at all in IE7.

Why Microsoft has such issues with worldwide web standards, I don't know. At least we have Firefox. Maybe, with these simultaneous releases of new browsers, more people will get fed up with IE and try Firefox. After all, if a browser is breaking websites, why use it?