Skip to content

New design

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!

Like this post?

If you would like to support the time and effort I have put into my tutorials and writing, please consider making a donation.

15 Comments

  1. Chris wrote:

    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.

    Saturday, March 3, 2007 at 22:43 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS
  2. Chris wrote:

    Oops, I see now that you have it installed already. 😛

    Saturday, March 3, 2007 at 22:43 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS
  3. Huw wrote:

    Brilliant – really good.

    It’s readability is what I like about it. You can clearly see where your eye is supposed to be.

    Saturday, March 3, 2007 at 22:48 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Windows Windows XP
  4. Huw wrote:

    btw, are you on twitter, Peter?

    Saturday, March 3, 2007 at 22:48 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Windows Windows XP
  5. Peter wrote:

    @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.

    Sunday, March 4, 2007 at 09:46 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS
  6. Peter wrote:

    @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!

    Sunday, March 4, 2007 at 09:47 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS
  7. Huw wrote:

    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..

    Sunday, March 4, 2007 at 11:29 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Windows Windows XP
  8. Huw wrote:

    re twitter: Chris, Jacob, Nick and I are all on twitter, as are most of the rest of the tech world!

    Sunday, March 4, 2007 at 11:30 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Windows Windows XP
  9. Huw wrote:

    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.

    Sunday, March 4, 2007 at 11:32 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Windows Windows XP
  10. Peter wrote:

    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.

    Sunday, March 4, 2007 at 11:43 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS
  11. Chris wrote:

    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!

    Sunday, March 4, 2007 at 12:59 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS
  12. Chris wrote:

    You’ll probably want a padding too, so don’t forget that.

    Sunday, March 4, 2007 at 13:00 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS
  13. Kamran wrote:

    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.

    Sunday, March 4, 2007 at 20:19 | Permalink | Using Unbranded Firefox Unbranded Firefox 2.0.0.2 on Linux Linux
  14. Kamran wrote:

    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 :-/ .

    Sunday, March 4, 2007 at 20:30 | Permalink | Using Internet Explorer Internet Explorer 6.0 on Windows Windows XP
  15. Peter wrote:

    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.

    Sunday, March 4, 2007 at 21:09 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.2 on Mac OS Mac OS

Post a Comment

On some sites, you must be logged in to post a comment. This is not the case on this site.
Your email address is not made public or shared. Required fields are marked with *.
*
*
*

Posting a comment signifies you accept the privacy policy.
Please note — usually your comment will appear straight away but sometimes it will be held for approval (this is due to the spam filter). If your comment is waiting to be approved, please don’t post it again! It will appear eventually.