Stylehack

In this article we’ll make our first modification by replacing the header image with our own image.

IMPORTANT:   For the purpose of this series of tutorials, I’ll be using the WP 2.5.1 DEFAULT template for all examples.

Changing the Header Image

This is a really easy fix. All it requires on your part is a little pre-planning, some common sense and a bit of skill with a graphics program. Sometimes — like this example — it’s as easy as replacing the existing image with a new image of the same dimensions, sometimes it takes a bit more work.

A Little Pre-planning

Load your blog in a browser and look at it carefully. In fact, it is sometimes helpful to save the index page WITH IMAGES as a plain old HTML page on your local computer so you can conduct a quick and easy check of things “under the hood”. Basically you need to have a good understanding of how the header image fits into the design.

The header image (kubrickheader.jpg) for the WP default theme looks like this:

Notice that it is part of a series of images that add a visual frame to the blog and that it has a gray-colored area around it. We can’t just replace the image wholesale unless we want to fiddle with the rest of the design and related images; instead, we’re going to alter that image.

Creating the New Header Image

1. Load the original header image (located at [path to your blog files]/wp-content/themes/modified-default/images/kubrickheader.jpg) into your chosen graphics program.
2. 
   Add a new empty layer to the image, on top of the original image (we’ll call the original image the background from now on).
   
   
   
3. 
   Create your replacement design on the new empty layer, replacing only the blue colored area!
   
   
   
4. 
   Merge all layers and export to the same format (jpg), making sure to RENAME the image to “myHeader.jpg” or whatever you chose… just give it a different name.
5. 
   Upload the new image to the theme’s image directory, in this case located at “[path to your blog files]/wp-content/themes/modified-default/images/” (no quotes, of course).

Modifying the Stylesheet

IMPORTANT:   This process assumes you followed the steps earlier related to making a copy of the theme for modification, making its files writable (777) and then applied that “new” theme to your blog!

1. Access your WP Dashboard in the browser of your choice. [Note: I use Opera, so all screen shots are from that browser's rendering of the dashboard.]
2. 
   Select Design > Theme Editor > Stylesheet
   
   
   
3. 
   Locate the section of styling related to the header image, in this case #header:
   
   

   #header {
   	background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
   	}

   
   
4. 
   Replace the name of the original image with the name you gave your new image:

   #header {
   	background: #73a0c5 url('images/myHeader.jpg') no-repeat bottom center;
   	}

   
   
5. 
   Make any other related changes you desire to overall background colors, header font color(s)/sizes, etc..
6. 
   Save your changes to the stylesheet.
   
   
   
7. 
   View your site.
   
   
   
8. 
   Voila! A new header!
   
   
   

Summary

Granted this was a very simple change. You might end up wanting to make more changes to the other images related to the visual frame for your blog, or the design you are modifying may be more involved. The process will be the same, however, simply replace the existing images with your desired images (maintaining dimensions) and then replace the image name(s) in the stylesheet.

In Article 4 we’ll make our second modification by modifying the default footer content. Please visit again soon or use one of the subscription links at the top of the sidebar on the right to be notified when the next article is posted.