How to Change Your Blog Header Image

If you’d like to customize the header image on your blog I’ve figured it out. It’s not that difficult once you have an understanding of the basic principles, but you need to make sure that you back everything up before you start messing around with your blog files! I’ve included the steps below but first will start with an explanation of the basics:

Your blog files have all been uploaded to your blog directory and can be viewed, downloaded, and replaced via an FTP program (I use Filezilla….details below).

I used a process in which I found the files I wanted to change, renamed them on the blog directory (from filename to filenameORIG), downloaded them to my computer, made the edits, and uploaded them with the original name (filename). That way if there was a problem I could always revert back to the original file.

There are 2 files that will be helpful to you. The first is the source code of your blog. This will show you the location of the image files and the css (cascading style sheet) file that are being used in your blog. The source code can be found by going to your blog and selecing the View tab, then Page Source

The css file determines the setup of your blog page, including font styles and colors, background colors, etc.

Your goal will be to identify the images that you want to replace, create new images with the exact same dimensions, rename the original images as imagenameORIG, and upload the new images as imagename.

The specific steps I used are listed below:

Go to your blog page
Under View tab, select Source
After the Title tags find the tag that begins with <link rel=”stylesheet”………Keep this window open and copy the link into a new browser window, the css file should open (it may ask you for permission to open Notepad – click Yes). In Notepad, select the Format tab and turn on Word Wrap
Find the Header information, and note the width and height of the header image. These are the dimensions you’ll want to use for your custom header.
Return to the original source code. After the body tag, locate the logo.png file and make note of the url – it will look like this: <img src=”http://your-blog-domain-name/wp-content/themes/your-name/images/logo.png” alt=”your-name.com” /></a>
Create your new header image, using the dimensions that appear in your current header image. Save as a .png image, named exactly the same as the current header.
If you don’t have an FTP program you’ll need one to upload your new header.
Use your FTP application to log in to your blog using the FTP login information you received via email with your blog login information
Open the wp-content folder, then navigate to your image
Rename the existing logo png image to something like logoOriginal – that way it will be saved in case you need to revert to it for any reason
Upload the new image, which should have the same filename that’s being used in your code.

I also created a new image for the background of my header area. This way the gradient from purple to light pink was spread across the whole page, rather than stopping at 960 pixels.

You can use the same strategy to edit your css file if you want to change your background color, font colors, etc. Just be sure to save the original files!!

Leave a Reply

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