Flight of the navigator

Today’s big task at work will be to keep working on coding the left-hand navigation for our new website design.

Disappointingly I don’t appear to be able to acheive the design that I want using CSS alone, due to the extraneous code that our content management system software adds to the unordered-list — it throws in a span tag with a class of “current<whatever>” between the li and a, which just throws my design by about 2 pixels, but enough to notice.

I’m loathe to use JavaScript to achieve the result, so I’m going back to the drawing board … [puts on thinking cap] … hmmm.


Photo by CanadianSc at stock.xchng.

Today was one of those days where you know that you need to get something done, you know that it’s important, you know that it really needs to be done as soon as possible but … well, it’s like going on a journey where you’re not entirely certain of the destination or how you’ll get there, but you’ll know you’re there when you arrive.

That image of navigation was quite a useful one to have in mind because the task in hand was to redesign the left-hand navigation on our new redesign of the University website.


At the moment we employ a navigation design that relies on left-hand markers to indicate at which level you are in the site hierarchy. It looks like this:

Example of left-hand navigation

The main criticism that we’ve had about this design is that there’s not enough contrast between the text and the background, which is a fair comment.

We also feel that there is not enough indentation between the different levels of hierarchy to make it absolutely clear which level belongs with which, especially when you get down to the 4th or 5th tier.

And the whole sorry mess takes up too much room.

Work in progress

So today I’ve been working on a new design, based on the navigation designed by my colleague Steve for the University’s sport website.

This is as far as I’ve got — it’s a work in progress, hence the non-sense text and random labels.

Work-in-progress example of navigation

The miracle is that by the end of the day I had something that works down to four levels, and works in Firefox 2, IE6 and IE7.

Tomorrow will be a day of tweaking, and testing it down to six levels … not that we really want six levels of site hierarchy. I sense a rearchitecting of bits of the website coming on!

That and bed!

Book on WordPress theme design

Packt Publishing have a new book on WordPress theme design:

“This book walks through clear, step-by-step instructions to build a custom theme for the WordPress open-source blog engine.

The author provides design tips and suggestions and covers setting up your WordPress sandbox, and reviews the best practices from setting up your theme’s template structure, through coding markup, testing, and debugging, to taking it live.

The last three chapters cover additional tips, tricks, and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using 3rd-party plugins as well as creating API hooks to add your own custom plugins.

Whether you’re working with a pre-existing theme or creating a new one from the ground up, WordPress Theme Design will give you the know-how to effectively understand how themes work within the WordPress blog system enabling you to have full control over your site’s design and branding.”

Gloucestershire Zeitgeist

Crisp on cheese on plate

So there I was, playing with my food at lunch and I appear to have accidentally created the next Turner Prize.

For those who might not know about the Turner Prize:

The Turner Prize is a contemporary art award that was set up in 1984 to celebrate new developments in contemporary art.

The prize is awarded each year to: ‘a British artist under fifty for an outstanding exhibition or other presentation of their work in the twelve months preceding’.


My piece is entitled Gloucestershire Zeitgeist.

The piece of cheese (Gloucestershire with herbs) is fashioned (by biting into it) into the shape of a saddled horse; it represents nature.

The potato crisp (an original Pringle) represents a sail, capturing the spirit of the age, the zeitgeist. It reminds us of man’s creativity through technology. Not always a good thing.

Together they represent humanity’s mistreatment of nature: like attaching a sail to a horse, which is clearly wrong.

The blue plate represents my desire not to get cheese on the table.

Red Robot Leaving The City

Have I shown you my laptop? It’s a Lenovo 3000 C100. Nothing wonderfully spectacular about it.

Laptop - front

Until you turn it around:

Laptop - back (complete with red robot and blue dog image)

How cool is that?!

It’s a GelaSkin that I got from Urban Retro. It’s called “Red Robot Leaving The City” by Exploding Dog.

GelaSkins are artistic, protective skins that are easy to both apply (with no annoying bubbles) and remove. There are loads of different designs available. Check them out.

Only I got the wrong size, which is why it doesn’t reach the bottom of the lid where the Ubuntu sticker is. I got the 15″ sticker (because I have a 15″ laptop) and then discovered that I’d ordered the 15″ widescreen sticker. For my 15″ non-widescreen model I should have ordered the 14″ sticker. Of course!

You can check out the proper dimensions here:

  • GelaSkins for PC
  • GelaSkins for Mac

I still think that it’s pretty cool.

Probably because I’m a boy. And boys like red robots. That’s official.

(According to the comments, it would appear that girls like red robots too.)