Hello everyone. In case you’re reading in a feed reader, click through now.
You’ve probably just noticed that there’s been a bit of a change. “What, where’s the orange?”. Let me tell you a story.
This morning, I woke up and I had an idea. I knew what I wanted my site to look like in the future. So I rushed onto the computer, launched The GIMP and did a quick mock-up of how the header image for a future revision of the site might look. I decided it looked awesome, so I saved it.
Then I wondered “hmmm – I wonder what this header image looks like if I put it in a veryplaintxt theme?”. So I got the local copy of my blog on my MacBook, installed veryplaintxt and put in my header image.
I then got really inspired and started a marathon CSS hacking session (the style kind, not the DVD kind), so I whipped through veryplaintxt’s CSS and designing my new blog style.
Interrupted between a random 16-mile, 2 hour cycle ride, I worked on the CSS all day (bearing in mind I’m not all that good at CSS) and finally, I integrated my static pages with the new style too.
By that time, I liked it so much I wanted to put it on the site, make it go live, today. Actually, it came close to not going live today, due to an incident involving Mac OS X’s Finder overwriting and not merging directories, but I don’t want to relive that moment.
If you visited the site in the last hour or so, you will have been greeted by a nice page telling you a new design is coming. Well, here it is.
I’m really happy with how it’s come out. The Blogger-era orange from those days is now long gone, and has been replaced with a nice white/red/blue look. The design looks and feels cleaner (and is – the code is now a lot better than it used to be). I just hope my readers like it as much as I do!
Thanks to veryplaintxt, which was the base style that I worked from to make my theme and of course two of the best operating systems in the world. 😛 And the Konqueror, Cyberduck and Smultron projects for allowing me to upload, erm – upload, and code my new theme.
By the way, what do you think? Please do let me know your suggestions, praise, complaints and all other feedback via the comments.
At the current time, I’m aware of a few minor issues with the design, including strange navbar rendering under WebKit (but not KHTML) and a couple of pixels being off here and there, as well as some minor IE bugs. I’ll keep you posted as to when I have ironed these out. If you see any other rendering bugs, let me know please!
Very nice. I’m surprised that you’re using Javascript for the navbar instead of blocking the links, but it all works!
Looks good. Also – if you’re using the GIMP in OS X you might like Seashore . It’s GIMP’s tech, made usable via Cocoa.
Oops, I see now that you have it installed already. 😛
Brilliant – really good.
It’s readability is what I like about it. You can clearly see where your eye is supposed to be.
btw, are you on twitter, Peter?
@Chris: Ironically, I did all the graphics in The GIMP for Linux. Put it the other way round – I didn’t do the graphics on the Mac. Stupid, huh. 🙂
Seashore isn’t a Universal Binary yet. Ugh. It also lacks some GIMP features (that or I can’t find them) and I’m not used to it yet. I will be – in time.
@Huw: To answer the question, I’m not on Twitter at the moment. I could be, though.
@Chris – BTW, how do I ‘block the links’? If you mean what I think you mean, that’s a much better way of doing it than my JavaScript.
If you explain it to me, I’ll do it!
I don’t quite understand what you’ve done with the JS (which probably means I shouldn’t be trying to give you any advice…) but what I think Chris means is adding the CSS attribute
display: block;
to the “a” tags on the navbar, which means that you can scrap the Javascript..
re twitter: Chris, Jacob, Nick and I are all on twitter, as are most of the rest of the tech world!
oh, I understand what the JS is for now – making clicking the rest of the box around a link other than the link text take you to the link destination.
display: block;
will solve that, because you can make that whole box a regular link.
The <li> elements of the navbar are currently set to inline so they appear in a row and not with a new line underneath each one.
Setting the <a> elememts to use block causes the new lines to occur, so I can’t work out how to do it at the moment.
I guess I need an expert.
BTW, it works with JavaScript off, you just have to click the link and not any part of the box.
display: block;
float: left;
margin-right: x;
That should cover it. No promises. If not, the JS works just as well so it isn’t urgent!
You’ll probably want a padding too, so don’t forget that.
Very elegant and refreshing. I haven’t checked the theme in IE yet, but it looks perfect in Firefox. I don’t mind JS as long as the page gives me some basic functionality without it being enabled.
Er.. Just checked it in IE 6, and the sidebar on the blog page is pretty messed up i.e. it starts below the regular contents of the page.
IE = Inherent Evil :-/ .
OK – I see that issue. I did test in IE6 under Wine during development of the theme, but I didn’t anticipate this issue.
Below a certain resolution on IE6 (roughly 1120 pixels wide), the sidebar is broken. I tested with a reasonably large IE/Wine window on my 1600×1200 Linux desktop, so I didn’t notice this.
The same issue does not occur on Firefox at lower resolutions, though, meaning it is a Trident rendering issue (guess what! 😛 ), but judging by my stats this is not really that important to fix.
I don’t believe this issue occurs under IE7.
I might take a look at it in due course, but being blunt, I don’t much care about IE6 rendering. I will not jump through ridiculous hoops just for IE.