Step by Step WordPress customisation

Posted by Mike

As promised – here’s a quick rundown of how I tweaked the default WordPress theme to match my own website. Pretty much everything was achieved by editing either the style.css or header.php files.

The changes to the basic proportions of the page were made by increasing the #page and #footer divs from 760 to 900pixels and adjusting the right sidebar content to be 250px wide (to match my own ‘content_sub’ div) and expanding the rest of the content to fill the gap.

Next I changed the basic colour scheme – or as much as I could using color values in the style sheet (text etc). I searched all the template files to see exactly where the background images appeared and then added my own versions (at the new widths) including a body background, a footer image that closes off the main grey box backround, and a new ‘topper’ image that does the same at the top (this needed a new div – added to the header.php file).

I changed the header box to be left aligned and smaller and removed the top margin from <h1> tag (blog title).

Lastly, I put a new DIV into the header php code – this is where I place all my own header content.  I also moved the background image from the body (to stop it scrolling when the browser is resized) into my own header code.

The last few tweaks were mainly little cosmetic changes – a bit of margin/padding adjustment and a new background colour and border around the comment boxes. And that was pretty much it.

Leave a Reply

Your email address will not be published. Required fields are marked *