Re-Designing the Blog - the fun part!

A few weeks ago I posted about Spring Cleaning the Blog and preparing for a new theme and new look for my little piece of the web. I’ve been pretty busy behind the scenes getting the design ready for the grand unveiling which will happen in the next few weeks. It’s not actually like there’ll be any big fanfare for the re-design, it just seems right for the new look to start when we leave Mexico and begin our new life (in so many ways) back in Perth.

So, for now, you’ll have to wait a little bit longer to see what it looks like (oh, the anticipation! :)) but I thought I’d go through some of the other things I have been doing to re-design my blog.

I’m still very much a beginner when it comes to blog design and have a lot more to learn. I certainly wouldn’t be capable of designing my own blog theme (maybe one day?) but I am starting to get the hang of tweaking an existing theme. Of course, there’s heaps of fantastic themes out there that don’t need any tweaking, but if you want to make it look distinctive, a bit different from the other people using the same theme, then you might want to make a few changes.

One the first things I did when customising my current (and the new) theme is to play around with the colours and fonts. This is a relatively easy process and doesn’t interfere with the structure of the blog (so you’re less likely to break it!). I still don’t know all the ins and outs of CSS, but I’ve found a few helpful websites to get the basics and help you identify the tags (classes) that you want to change.

• Introduction to CSS from W3Schools
• CSS Basics

The CSS (which controls the look of your blog) is contained in the stylesheet (style.css). You can edit this through the Theme Editor in WordPress or using a text editor and a FTP client. For example you could look for this CSS markup:

a, a:visited { color: #000000; text-decoration: underline }

which makes all links black in colour and underline. If you wanted to change the link colour to red, just change the colour value to #DFDFDF. Easy as that!

I probably spend way too much time agonising over what colours to choose for my blog, but I think a colour scheme makes a pretty big impression when you visit a website for the first time. I am hopeless at plucking a colour out of my head though, so I use a couple of different online resources to help me get started.

When I first started tweaking my current theme I knew I wanted to use a particular photo in the header (the one with the mountain and the ocean - I took it at the beach about an hour from where we live now and I really like the colours in it). I found the Palette Generator at Big Huge Labs where you can upload a photo and it will generate a scheme of colours to match the photo and give you the 6 digit code for the colour. I used that as the basis for my colour current scheme because I knew it would match my header image.

There’s heaps of other colour tools out on the web; here’s a few others I have used:

• Color Lovers
• Color Blender
• plenty more mentioned in this thread on the Aussie Bloggers Forum

Often a few changes to the colours of headings, text and background can make a huge difference to the look of a blog and you might not need or want to do anything else.

But, I can’t help myself, and I enjoy the playing around with the theme, and an excuse to learn some new stuff in Photoshop so for my new theme I decided I would make my very own background and header image.

I wanted to go for a patterned background and used this tutorial to create my background image.

As for the header image, really the only limit is your imagination! I find I struggle with having the “creative inspiration” to come up with something new, so often what I make is a mish-mash of ideas I see around the place. To make my new header image I played around with some different fonts and (one of my new favourite things) Photoshop brushes.

Here’s a few links to groovy font and PS brush sites if you want to check them out:

• Da Font - an enormous collection of fonts - all free to download!
• Photoshop Support
• Graphics Illustrations
• Hypergurl Free Photoshop Brushes

So, I’m almost done putting the finishing touches on the new look and I’ll be activating it pretty soon. I’ve also almost finished my “Design Page” which captures all the tweaking I’ve done to this theme and the new one, plus all the plugins I am using, in case you see something you like and want to know how to do it.

Hopefully some of these tutorials and tips might be of use or interest to you too. Maybe it won’t make much sense…or will all become clearer once you see the new look!