I decided to do a little makeover on my blog a couple of weekends ago. Do you like it?
I won a new logo from LogoGarden via Craftgossip and as I started to make it I realised that it would be nice to have some colour. So I found a new colour scheme and things kind of went from there. A couple of hours later it was all looking lovely.
Now I know that a makeover seems like a big deal and I know some people pay someone to do this for them, but there’s a lot you can do yourself that is not that hard.
First you’ll need to decide on your colour scheme. I went to ColourLovers and browsed the pages until I found a palette I liked. You can search and save a little time too. So if there is one colour you know you want, you can search for that colour and find schemes with it included.
Once I had a found a colour scheme, the info was all there for me. To change colours on your blog, you need the HEX Codes for the colours which are listed on the left under each colour.
My next move was to change my background. I used a very clever tool at PatternCooler. (Hat tip to Blogging with Amy for this find.) There are hundreds of patterns to choose from and you can change each of the colours within the pattern. This is where you can use those HEX codes I mentioned before for your colours. You can choose exactly the right colour by typing the HEX code into the little box I’ve marked in my picture below. It is amazing how different each pattern can look with different colours!
Once you have your pattern ready, you download it from the site. Then go into your blog dashboard and find the Background page under Appearance on the left hand side. Upload your image and choose the “Tile” option.
Change font colours
Now this next step may be different depending on which theme you are using on your WordPress blog. I use the Genesis Framework for my blog with a StudioPress Child Theme called the Pretty Young Thing.
NOTE: You should backup your blog before you start this step just in case you delete something accidentally and break your blog. (Cough… Been there, done that… Cough…)
To change font colours, I need to access the CSS style sheet which is found in the Dashboard under Appearance > Editor. This is in CSS code which I don’t pretend to fully understand. But I have learnt that I’m looking for lines that say “color” then a HEX code. So here’s a peek:
This shows the section of code for Heading 1 and 2 on my blog. Just under the list of which headings it is for, there are the properties of those headings: the colour, font size and line height. To change the colour, just change the 6 characters for the colour. Note: Leave the “#” and the “;” there or the code won’t work. There should be similar pieces of code for all the different headings in your theme including the sidebar headings. Click “Update File” to save the changes when you are done.
As I said at the start, my changes were prompted by winning a new logo from LogoGarden. I had never seen this site before but I was pretty excited once I got started. You can start straight away for free and choose from hundreds of images for your logo. Then you can create the words to go with it and move it all around until you are happy with it. It is very intuitive, and you can go back and change the image as many times as you like until you are happy. If you can’t get it looking perfect, there is a team of designers that can help you. Once you’re done you can download the logo to use online or in print as well as order business cards and more. Again I used my HEX colour codes to get the colours I wanted.
I think I was most impressed with the service. If I had been in the States, they would have phoned me to get me started, but as I was in Australia I got plenty of emails checking how I was going and making sure I was happy with the process. When I wanted to use a button image and couldn’t find one in their database, they said “hold on a day or two”, and within a week they had not one but 9 different button images on the site for me to choose from! So I would recommend this to anyone. The prices are quite reasonable and I’m so happy with the result.
Once I had my logo downloaded, I created a simple header in Skitch, a free piece of software I use almost everyday. A couple of simple lines on either side of my logo image and I was done. My header is 960 pixels wide so I made it exactly the size I needed.
To upload your new header, look in the Dashboard under Appearance for the Header section. Just upload your new image and you’re set.
Changing other Theme images
For the slightly more brave, you might want to change some of the other images in your Theme. For example, I changed the graphic that is behind the sidebar headings and the footer text. I also changed the line that divides posts on my home page. Each of these are image files with specific names in my theme. I looked at the originals to get the sizes in pixels, then created my new ones in Skitch and saved them. The tricky bit is loading them into the file manager at my Hostgator dashboard. Look for a tutorial on this section next week. I think it deserves its own post! (Edit: That post is now ready: How to Change Your Theme Images)
A few more colour changes
- Hellobar – right at the top of the screen. I changed this at their website.
- Newsletter Signup Box – Also a change made at the website, Aweber, where I make my newsletters
- My profile picture and store button – in the sidebar. I made these using Picasa, a free photo editing software.
- My social media buttons – these were from Sweet Faerie Designs and come in about 12 colours.
So there you have it. A few changes that have made my blog look fresh and new! I hope this helps someone else have their own online makeover.
Note: Some of the links in this post are affiliate links which just helps pay for the cup of coffee I’m drinking as I write this post. More info on my Disclosure page.