Changing the header in my WordPress Revolution Blog

Dear readers, this post is one of a series I’m writing as I set up my new blog and get it looking just the way I’d like when visitors come to call. It’s been an arduous process, as setting up a WordPress self-hosted blog means that you have to go in and play around with the HTML code a lot more than I was used to with my old blog hosted by Blogger. Hopefully it will be worth it in the end, as I’ll have more flexibility to make it look just the way I want.

There’s help available in the WordPress help area here and in the Revolution Lifestyle support area here. However, I’ve found that developers often assume you have a fair level of background knowledge of WordPress and HTML code, which may not be the case. Also in the WordPress support there’s so much information, it’s sometimes difficult to pinpoint exactly the help you need. That’s why I’m giving you a detailed guide on what I did to set up the Header on my Wordress Blog using Revolution Lifstyle as my theme. I can’t guarantee that this will apply to you, but it might help if you’re trying to do the same thing. If not, then use the WordPress support area and forums or the support area and forums for your own theme.

Now read on for the technical details;

WARNING: This involves changing the HTML code in the Design/Theme Editor/Templates. Before you make these or any other code changes, you should always as a precaution make a copy of the original HTML code, for instance in a Word Document, in case you make a mess of it and need to easily go back to the original version.

Changing the Title from an Image to Text
Revolution Lifestyle comes with an Image set up as the Title within the Header bar. As I didn’t yet have a nice, well designed Heather on her travels image to put in there, I needed to change this to text. There are instructions on how to do this in the Revolution Lifestyle Support area here. Just in case you can’t access this, I’ll reproduce the instructions. They worked for me.
1. In your WordPress Admin area go to Design/Theme Editor. From the list of Theme Files on the right select Header.php. template. This will bring all the code into the Text Editor window.
2. Towards the bottom of the template find the following code

<div class=”headerleft”>
<a href=”<?php echo get_settings(‘home’); ?>/”><img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png” alt=”<?php bloginfo(‘name’); ?>” /></a>
</div>

and replace it with this code

<div class=”headerleft”>
<h1><a href=”<?php echo get_settings(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<p><?php bloginfo(‘description’); ?></p>
</div>
Save your changes.

3. In the WordPress admin area, you can now go to Settings/General. Set up your Blog Title and Tagline (if you want one). Whatever you put in these boxes will now appear as Text in your header

Adjusting the look and position of the Title in the Header
1. In the WordPress Admin area go to Design/Theme Editor. From the list of Themefiles on the right select the Stylesheet at the bottom. This will bring all the code into the Text Editor window.
2. Find the code below in the Header section of the stylesheet.

#header h1 {
color: #FFFFFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0px;
padding: 15px 0px 0px 20px;
text-decoration: none;
}

3. Now you can make the changes you want. For instance I changed the font size from font-size: 36px; to font-size: 50px;

Adjusting the depth of the Header
The width of the header is pretty much fixed, but I wanted to make the header taller from top to bottom in order to have more room to add a nice colourful photo. This is what I did to change the depth of the header.
1. In the WordPress Admin area go to Design/Theme Editor. From the list of Themefiles on the right select the Stylesheet at the bottom. This will bring all the code into the Text Editor window.
2. Scroll down the code in the window until you find code like this.

#header {
 background: #85ACAC url(images/header.png);
 width: 960px;
 height: 100px;
 color: #FFFFFF;
 font-size: 11px;
 margin: 0px;
 padding: 0px;
 overflow: hidden;
 }

I changed the height to 150px to make the header wider
Then save your changes.

Changing the colour of text in your header
Follow the same process as above but in the Stylesheet template in the header seaction you will need to change wherever it says color: #FFFFFF; to the colour of your choice. To find a menu of colours and the numeric codes representing each one, go to this page.  Take the code for the colour of your choice and use it to replace  #FFFFFF. Then save your changes and check your blogsite to make sure it looks as you wish.

Changing the header background to an image
I wanted to change the plain blue background to a photograph from my collection, which I’ll probably change this from time to time. I keep my photos on Flickr which has an editing facility called Picnic. I used this facility to edit my image to the correct size, but if you don’t want to open a free Flickr account there is plenty of other photo editing software around you can use.
1.In order to check the size of my header I found a couple of options. a) In the WordPress Admin area go to Design/Theme Editor and in the Stylesheet find the code that starts #header as shown above. The width and height is part of this code e.g. width: 960px;height: 100px; b) Go to the folder on your computer where you downloaded the unzipped files for your theme. In the images folder you should find the header.png image and if you hover over this it will give you the dimensions. You can also right click on it and look in properties/details.
2. I downloaded my correctly sized image to my computer, then saved it into the Theme folder on my computer in the images folder. I gave my new photo image the same name as the original header image header.png.
3. Then I uploaded the new header.png image to my server into public_html/wp-content/themes, lifestyle_10 (or your theme)/images folder.
4. Now the new photo image should appear as background in your header.

Read related posts
Setting up my feeds in WordPress Revolution Lifestyle
Setting up pages in my new WordPress blog
Project Planning for my WordPress blog

Return to My Blogging Journey Home