themes

Somewhere over Garland's rainbow

screenshot of new site
Garland theme administration, which was introduced in Drupal 5
design from 2006
design from 2006

Garland has been a good thing for Drupal, overall, mainly for the color module. Anyone remember what it replaced in Drupal core? Yeah, it was pretty ugly. Context is important. So even though Garland is something of a front-end developer's nightmare, it has its purpose for the new Drupal user wanting to do at least a modicum of customization to the site's look, without resorting to coding.

And it has served its purpose here. I leaned on Garland (or actually her fixed-width daughter, Minelli) for my blog here for many months ... maybe more than a year. I honestly don't recall. It was since I upgraded to Drupal 6, when I didn't have time to work up a new theme. Garland gave me something so at least I could present the content here (such as it is).

But thanks to the fabulous NineSixty theme, I was able to whip something together yesterday afternoon — the theme you are seeing right here on rarepattern.com. That's right, it took me just one afternoon, even though I was hand-coding a few templates. NineSixty made it all so easy!

I had been designing using the 960 grid for quite some time now, but I had never employed the Ninesixty Drupal theme for implementation before. After hearing all the buzz at Design 4 Drupal Boston 2009, I was definitely curious to try it out. Now was my chance.

My own prior themes for rarepattern had been pretty hacky — quick throw-togethers with plenty of shortcuts. With NineSixty, I spent less time and resorted to fewer hacks. I still have some extraneous styles lurking, and of course there's the usual mark-up excess of some Drupal modules like CCK, but this was about quick implementation, with the emphasis on quick.

One of the beauties of NineSixty is that your page layout mark-up and CSS are pretty much already done. You actually accomplish most of your own layout adjustments directly in your page.tpl.php template. Just copy NineSixty's own into your own theme folder — the folder you created to make a child theme of NineSixty — and edit the classes on the various regions.

grid-8 means 8 grid columns wide

prefix-1 means 1 empty grid column before

suffix-2 means 1 empty grid column after

And there's more — push-x and pull-x, for example — to give you all kinds of power. Just change the classes assigned to each region, and your page falls into place.

The rest is just "skinning."

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.

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.

Nervous time [updated]

It looks like the session we proposed for the OSCMS Summit has been scheduled for March 22nd at 1:45 p.m. 11:30 a.m [?], first last session after before lunch, in "the big room." Even though I feel confident in the topic and the deep knowledge of my co-presenters, I do feel some stage fright. Eeep!

Update: My session on community building was also booked later the same day. That concept from the start is for more of a round table discussion, so I hope people attending this one will come chock full of ideas and experiences to share.

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!

Dotslash Drupal theme

Over the past few days, while doing some free-association doodling to clear my head between design work for clients, I came up with this crazy little theme. There's no Reboot occasion. Just needing a change here. I suppose I should add a screenshot to the portfolio, along with others in an overdue update.

Anyway, it seems to work in Firefox, Safari and IE (Win). If it's crazy breaking somewhere, please let me know.

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?)

Emulating CivicSpace

One of the more exciting projects I'm working on right now is a semi-major website for the as-yet-to-be-announced "Client B." ("Client A" is the as-yet-announced DVD project client.)

(A note about as-yet-to-be-announced clients: Sometimes you want to announce the new gig right off, and sometimes you want to line up your ducks first -- and we like to have our ducks all lined up in pretty formations before the fanfare starts.)

Anyway....this will be an interesting site because we're building it in Drupal but, in the end, will be approaching something similar to what a CivicSpace installation might have yielded. (I won't go into the why's of not just using CivicSpace except to say that this was the client's preference.)

A big part of this project will be the incorporation of CiviCRM into the site. The site's membership is expected to jump up into the several hundreds in the early going, and having robust membership directory management features will be key.

The real challenge has been getting all the essential information into the site's front page. Most websites, frankly, don't need to manage so much information.

Needless to say, the front-page module will play a key role, and include much in the way of php code calling up lists and excerpts from recent and most-active posts. The challenge lies in keeping that front page scannable. Most front pages like this end up being an utter mess to my eye; I think concepts of visual chunking of the interactive interface elude most people. Hell, sometimes they elude me -- it's not easy, getting a lot of information on a single page without making it look like a monkey got ahold of a keyboard.

I'll also be using directed themes guided by the particular sections of the site. The exact approach -- using the sections module or the taxonomy theme module or something else -- I'm undecided on.

Anyway, this design and coding challenge is what will serve as my early holiday entertainment. We'll be going with a public beta sometime in December, so in the end it will be Client A, and the as-yet-unknown Clients C-Z, who will offer respite from Christmas carols and holiday cookies and divinity fudge and extended family.

CSS-only design

I've read about it. I've talked about it. I've thought about it (a lot). But now I thought I'd just do it. So I went through the page template, ripped out the tables and wrapped everything in divs, dropped some position settings in the stylesheet, moved the main content up top to load first, and here it is.

It's not too pretty yet, but hey, I did it in a half hour. I'll polish it and get the margins right, maybe add some graphics. I haven't had a chance to put stylus to pad yet. In fact my new WACOM pad is some 6 weeks old now and I've hardly touched it, thanks to my most-uncooperative back, so I'll probably do the mouse thing, which is much more familiar to me, anyway, despite the theoretical limitations.

And so far I've left a lot of extra garbage in the templates and css files. I'd be more tidy, but I've been busy working on the site plan for a major community site (to be announced on the web design site) and a proposal for a robust non-profit site, and that leaves a little blogging time, here and elsewhere, and some selfish reclusive indulgence time reading The Da Vinci Code.

Besides, I plan on keeping this site pretty simple, so hopefully I won't get lost in tangent land and wind up with a dog pile of text all in one corner of the screen. And once I get ahead of the curve on those websites, and caught up on the big DVD project that has outgrown its intention, I'll really clean up the code and submit the theme to Drupal.

Anyway, if you see a glitch, shoot me a note. Constructive feedback is most welcome.