How to customise a WordPress website: Part 2

This is the second part of my article on How to Build a Website with a Quality Free WordPress Theme. In the first article, which can be found here,  I showed how to set up the basics and here I’ll start to customise features and add some content.

Customise your header

We’re going to start sorting out the header. At the moment, it’s just text with a gigantic banner background sized 960px (pixels) x 198px. I’m going to draw up a logo to replace all this and more than halve the depth to 90px as I feel 198px is far too deep.

9newgraphenecustomheaderj
This is what the default text header looks like with a banner background of 960px x 198px.

If you really want to keep your header as text then you can do so and you can pick from a few options for a background or rotate the options so you have a different background on each page.

But to look like a professional website, I feel you need a custom header. You can draw up a logo yourself or get someone to do it for you. It’s easy enough to design your own simple header. I use Adobe Illustrator but there are dozens of cheap or free graphics programs, including MS Paint and Inkscape, which is free.

You can also use drawings from within the Google Docs online at Google Drive but there is a problem here as Google Docs doesn’t let you set the exact size of your graphic so you’ll still have to take your file into another program to get it right.

googledocs1j
A simple type logo set in Google Docs

You could also use an online logo generator websites but again sizing can be a problem. Some sites charge for a download and some are free. For example, Designmantic charges around $29 for a logo while Logotypemaker is free.

designmanticj
You can get a decent looking logo quickly from Designmantic for $29.
logotypemaker1j
Logotypemaker offers a range of quickly generated designs for free.

My logo is going to be 960px wide x 90px deep, so it will cover the width of the page. You’ll find that if you design your header smaller than the set width dimensions it will be blown up to fill the space, which looks horrible.

You don’t have to set the type of your logo to fill the width, just add a background to 960px wide. You can use any sort of background. I’m going to use a solid colour to begin with although I’ll change this to white later on so it looks as if there is no background.

Once you have your logo complete to the right size, save it as a jpeg file.

Now under Graphene Theme Options/Display, open the Header Display Options. Check the box on the third option, Disable Featured Image replacing header image or you can end up with your header being replaced by a featured image.

Under Header image height, change the box to 90.

27newgrapheneheaderheightoptionj
Changing the header display options is straightforward.

That’s all you really need to do for the header display options although you might want to link your header image to the front page and/or use light-coloured header bars, it’s your choice. I leave them unchecked.

Now go back to Appearance on the left of the dashboard panel and you’ll find Header third from the bottom of the flyout. Click on this and it will take you to the Custom Header section.

Upload your header jpeg from Select Image/Browse/Upload or select it from your media library if you’ve already uploaded it. You should see your logo come into a bounding box as shown in the screen shot below. Click on Crop and Publish.

25newgraphene90heightj

Scroll down to the bottom of the page to find Header Text and uncheck the box which says Show header text with your image.

Remember to Save Changes or your website will not be updated.

On the next page, I’ll start to customise the navigation menu