Note: the ID’s for divs will vary from theme to theme.

In the main index.html file, find the section that refers to the header. Replace it with the following code:

<div id="header">
<a href="{$siteurl}" title="{bloginfo show='name'}"></a>
</div>
In the stylesheet, add (or replace existing code):

#header {
margin: 0;
padding: 0;
height: 200px;
background: url(/images/header.jpg) no-repeat;
position: relative;
}
#header a {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
}

The background url and height in the #header section, and the width and height in the #header a section will be that of your image, change as appropriate.

Ensure that there are no #header a:visited, #header a:hover links in the stylesheet, and that you don’t use #header a:link

Note: the ID’s for divs will vary from theme to theme.

It is advisable, unless you want to re-design your entire blog, to make sure the image you are going to replace the current one with is the same size.

Once you’ve created your new header, make sure it is optimised for quick loading, and upload it, either to Blogsome or the host you use for uploading images to.

In most themes, the code for the header image is in the #header div, though #top or #masthead may be used. This is the an example of the code to look for:

background-image: url(/wp-inst/wp-content/sitetemplates/minimaplus/img/masthead.jpg);

Change the location of the image to that of your own:

background-image: url(/images/imagename.jpg);

Make sure there are no ‘ ‘ or ” “ marks around the filename.

This is the method I use to work on Blogsome Themes offline, making sure a design works before installing it online.

Instructions:

You’ll need a text editor, which can either be notepad or EditPad Lite which I use. The easiest way of editing CSS is with TopStyle Lite, though any plain text editor can be used.

Create a folder on your PC called Blogsome Designs.

Sign in to your blog, and from the Dashboard, go to Manage, Files and save a copy of the following files as text files:

Main Page
Site Style Sheet
Posts
Comments

Also save a copy of the Site Style Sheet as wp-layout.css into your Blogsome Designs folder on your PC.

Go to the frontend (public view) of your blog and save the page as frontpage.html to the Blogsome Designs folder on your PC. You will also need to save a page with comments on, if you don’t have any available, make a test comment, then save that page as comments.html into your Blogsome Designs folder on your PC.

Open both the saved files frontpage.htm and comments.html. At the top of the page you’ll see this link;

<style type=text/css media=screen>@import url(http://yourblog.blogsome.com/templates/wp-layout.css);</style>

Change it to:

<style type=text/css media=screen>@import url( wp-layout.css );</style>

This means you can now work on your stylesheet and changes will be shown in the saved files.

Open frontpage.html in your browser and open the stylesheet in either TopStyle Lite or a text editor. As you change the stylesheet, you refresh frontpage.html in your browser. Continue to work away until you have your finished design.

Then you’ll need to copy the entire stylesheet and replace the existing stylesheet for your blog. If you’ve included any images, remember to change the reference in the stylesheet to;

background: url(/images/pic.jpg);

If you upload your images to Blogsome, or the URL of your image hosting site.

Some useful links:

http://www.alistapart.com/
http://codex.wordpress.org/Main_Page
http://css.maxdesign.com.au/index.htm

Note:
Display of layouts can vary from browser to browser, so where possible, try and view your design in, at least, FireFox and IE.