I’ve spent the evening hacking the hell out of the the WordPress get_calendar() function to give me a horizontal calendar in the header to replace the tabular version in the sidebar.

I’ve converted it from a table into an unordered list (to match the rest of the rows in the header) and rearranged things so that you have the previous and next months at either end. Stylistically, each day with a post is bold and days without posts are faded out; today’s date is highlighted in the yellow; hovering over the post days gives you a short piece of text giving the full date and the titles of the posts made on that day.

While it was certainly not as difficult to put together as I had thought — the bulk of the work has come from the get_calendar() function — I went through many, many tweaks to get it to this stage, but as always I spend a lot of time over the tiniest, most inconsequential details.

Technorati Tags: design, php, website, wordpress

Following on from the styling of the header information (Pages, Archives etc.), I’ve styled the post title, date and the meta data at the end of every post.

Another little tweak was to add the relative time since the post was made below the post title. The iTunes information now fits into the scheme better and the Technorati tags follow on nicely from them with the potential for more snippets like these in the future.

The Technorati tags were difficult to style. They’re added automatically by ecto, the blog editor I am using, as a plain <p>. There’s no way to edit the template for this to add a class to that paragraph so that it can be styled independently from the rest of the post. So how could I pinpoint this paragraph and apply the styles to it? What was unique about it?

I had to read up about adjacent selectors in order to solve this one. This paragraph’s unique attribute is that is immediately follows the div.iTunes, so

div.iTunes + p {}

does the trick.

Problem: Because the iTunes div and the Technorati p sit within the ‘postentry’ div they retain its margin so I have to override this with a negative margin – which is a bit hit and miss between different browsers because it’s specified in ’ems’. I’ll have to change that back to pixels so I can get it lining up exactly with the edge of the box (including all the hacks for IE).

Technorati Tags: design, ecto, tags, webd, website

My company has been commissioned to “spring-clean” the first website I ever coded.

I’ve been wanting to do this for ages, the code is atrocious, very embarrassing to have up in public. This work is being done in tandem with the development of a new site for one of their partner organizations. The new site will be database driven and designed from scratch. It’s good to have this opportunity to revisit a site as it means that the finished product will be fit for showing around at last.

It’s not good when a job has been finished and over time you realise that there was a better way of doing it. Because it’s been handed over you are not in a position to change anything but the most basic parts of it. As with all jobs there has to be a point at which you say “it’s finished” and let it out the door. Or perhaps “at this point, it’s good enough to release”, the QA balance has tipped over into client-ready. You could spend forever tweaking it, or waiting until your knowledge extends so that you are able to do it differently/better, but scheduling would then be impossible.

There’s always a cut off point where a project has to finish, even if the definition of the term can be ambiguous. Anyway, if we’re fortunate we can always revisit a project and apply the knowledge learned in the interim.

Technorati Tags: code, website, work

As I’ve mentioned before, the sidebar is way too cluttered so I’ve done something about it.

I’ve moved some of the more straightforward lists up to just below the header to tidy them up. I’m going to do something with a photographic image, which will be quite a departure from my normal flat colour schemes. Ooh, radical!

These new strips will also keep the body of the page much cleaner for adapting it to a photoblog layout. I want to convert the calendar into a strip of numbers, rather than a table, but as far as I can tell the PHP for creating this is a mite complicated. I’m sure I’ve seen it done this way somewhere else, it’s just a matter of finding that site again and seeing how it was done.

Technorati Tags: blog, design, photography, website