Design

When I first moved my blog to my own domain in December 2007, I was pretty excited about the new level of control I would have over the content and the design. I was (and still am) a beginner when it comes to web design, even though I’ve bumbled through a few bits and pieces over the last few years.

I enjoy learning about it though, so I am slowly teaching myself a few tricks in CSS and PHP. I still have a HEAP to learn and I follow a lot of tutorials I find on the web, not always completely understanding how it all fits together. Of course, this gets me into trouble sometimes and I probably take a lot longer to get to the final result than I should, but I figure all that trial and error is teaching me something too.

I decided I want to keep track of the design modifications I had made to my blog theme so I would always have a handy reference of where I found the instructions for tweaks, and to share with you guys in case you like something you see on my blog and want to try it out for yourself.

It’s also nice to have a record of how my blog used to look. June 2008 sees a new theme and design for the blog. It probably won’t be the last re-design, so this way I’ll be able to look back in years to come and remember the evolution of my little place on the web. The design notes are in reverse order so you can see the current theme tweaks first. The plugins I use are at the end of this page.

June 2008 - present

Customised Thesis Theme

In June 2008, when I was leaving the expat life behind and getting ready to move back home to Perth, I decided it was time for a new look and re-designed the blog, using the Thesis Theme by Chris Pearson at DIY Themes. This is the first time I have used a premium theme (ie not free) and in this case, it is definitely worth it, not only because the theme itself is so well-designed but also because of the support provided. The author has a blog for the theme with tutorials on how to set-up and customise it, as well as a forum for thesis users where the author and other bloggers can swap notes on tips and tricks and any problems they are having with the theme. The purchase price for this theme also buys you access to all future upgrades to the theme for free.

I am so impressed with the level of support for this theme, there may be no going back! Particularly for someone like me, who is still learning a lot about blog design this is the perfect set-up. The theme is designed to be customised easily and there’s a group of helpful forum members ready to help you through the steps.

Original Thesis ThemeThe way the Thesis Theme is set up, customisations to the CSS are very easy and are retained through any future upgrades. Ordinarily any style changes would be made to the stylesheet (style.css) which is overwritten if you load new theme files. This theme includes a custom.css file which, when activated, overrides the css in the stylesheet for which ever classes you wish to customise. Chris Pearson explains the benefits of custom stylesheets much better than me on his blog - How to protect CSS Mods for any Wordpress theme.

This theme needed much fewer modifications than the first one; mostly I have just changed colours, fonts and put a custom background in (following instructions on the thesis blog). I also added some of my favourite Flickr photos using the Photoxhibit Plugin (more on that below) underneath the rotating images on the right side, made a custom header image and moved it above the navigation bar in the Main Index template. The header and background images were made in Photoshop.

Here’s my own little palette for the colours I used with this theme. They look like a rather unlikely combination all together like this but I’m happy with the result. Obviously some of them like the browns and beige are more dominant than the pinks and blues, which are the accent colours.

Thesis Colour Swatch

The values for these colours(L-R):

  • Dark brown - #827D72 - R130, G125, B114
  • Light brown - #CFC7B6 - R207, G199, B182
  • Beige - #E7E3DA - R231, G227, B218
  • Pink -  #DABFC4 - R218, G191, B196
  • Darker Pink - #B6828A - R182, G130, B138
  • Blue - #B6C0CE - R182, G192, B206
  • Navy - #565D63 - R86, G93, B99

December 2007-June 2008

Customised Cleaker Theme
The first theme I used at www.roamingaussiemum.com was the free Cleaker 2.1 Widgetised Theme and this was my first attempt at tweaking a theme to put my own stamp on it.

Original Cleaker Theme

That’s the original on the right, so you can see I made quite a few changes to the look of it, including a change to the colour scheme and the addition of rotating header images. I am still learning about CSS syntax but the introductions below are a good help for identifying the tag you wish to change in the stylesheet.

Once I got a bit more confidence with tweaking my blog (and didn’t worry quite so much about breaking it!) I tried a few more complicated things like adding a new sidebar (the top double-width one) to accommodate some wider elements like BlogHer Ads and other minor changes like separating trackbacks and adding a custom signature to posts.

A few tutorials I followed to make these changes were:

I also learnt how to make my own favicon (the little image in the browser tab) by following Meg’s tutorial.

Plugins

I’ve played around with a number of different plugins (I do like to try new things!) with varied success. These are the plugins I am currently using on my blog:


Comments protected by Lucia's Linky Love.
Gorgeous Girl

Recent Flickr Photos

In Costume Serious Chiq Vintage Chiq Guerita , Chiq & Sleeping Beauty 2 Sweet Ride