Let’s go shopping! [11]

February 4, 2007

One of the great things about WordPress is the theme concept. A theme is like a skin; it changes both the look of the site and the functionality. And you can change themes with one mouse click, which is very cool. There are dozens of pre-made themes available — which is good, because it’s a little hard to customize code in the free version WordPress.

Because we’re going to be running it on our own host, however, we can download a theme and deconstruct it completely. Therefore, we only need to get kinda, sorta close. In fact, all I’m really looking for to start is three columns with a banner across the top. This one will do:

 

theme.jpg

 

This is WP Andreas 00 by Andreas Viklund. Dude, I’m giving you a shout-out here and now, because by the time I’m done mangling your code, your own mama wouldn’t recognize it. Word.

When I was designing my original WordPress.com site, I wanted it to look like a newspaper. A very cheap newspaper. I mean, lower than a tabloid — the kind of free paper you pick up in the lobby of the supermarket. I had in mind something like the Arlen Bystander — the paper for which Peggy Hill writes her “Musings” column.

That’s a pretty specific scheme, but any designer will tell you it’s actually easier to work inside a set of limitations. The more specific, the better. I thought about abandoning this design idea for the hosted site, but I have so much fun playing with the little sidebar features. And it’s got another virtue — black and white graphics are much, much smaller. Graphics with solid areas of one shade that can be efficiently saved as indexed .gif files are smaller still. This means you can load a site up with images and not create bandwidth issues.

Design-wise, there are three differences I want to make in this version:

It needs to be tighter. Because I was working within the limitations of the free WordPress editing capability — basically editing text widgets and moving them around the sidebars — I never got everything lined up right. Things not lining up right are severely crazy-making to designers.

It needs to be smaller. I did a lot of the older design on my IBM ThinkPad, which has a screen resolution of 1400 x 1050. Viewed on a larger monitor at lower resolution, the result is an in-your-face HELLO!! I’M A DESIGN ELEMENT!!! sort of visual experience. The layout is 170 + 500 + 170, which should have been an easy screen fit. But that’s larger than the default opening size for an Explorer window, causing some annoying side scrolling issues.

It needs to be less busy. All those fiddly graphics in the sidebars can be mighty distracting. I’m thinking, maybe it will help if I limit the graphical range. Like nothing in the sidebar being quite as dark as black or quite as light as white. I don’t know if that’ll work, but it’s the plan.

Functionally — well, that’s easier to describe. I’m going to take Andreas’ code, pull out everything I don’t understand, and see if the resulting pale shell of a theme still works. Whee!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.