header customization with images

There are two simple ways to customize the header of your theme with a custom graphic (logo or header banner):
1. adding a small logo image before your blog´s title and slogan
2. replacing the default header with a custom header banner

This tutorial shows you how to implement both options:

1. adding a small logo to the header

Step 1: Open the header template (header.php) and find this code:

<div id="sitelogo">
<span class="blogname"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span><br />
<span class="blogslogan"><?php bloginfo('description'); ?></span>

Step 2: Right below the opening tag of the “sitologo” DIV element ( <div id="sitelogo"> ), add your image and make it float to the left side, using the CSS style “float: left” like shown below.
Replace “IMAGE_URL” with the URL to your logo image
Replace “ALT_TEXT” with an alternative text for the image
Add height and width values for the image

<div id="sitelogo">
<img style="float: left" src="IMAGE_URL" width="" height="" alt="ALT_TEXT"/>

<span class="blogname"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span><br />
<span class="blogslogan"><?php bloginfo('description'); ?></span>

2. replace default header with custom header graphic

For some niche blogs, you might have a custom designed header graphic that you want to use instead of the default header. Here is how to replace the default header with your custom header banner and optionally activate the top navigation bar. Before you add your custom header image, you should know its dimensions (i.e. width and height in pixels). Your image should have the same width as your blog´s layout. The defaults are 780 pixels in 2 column themes and 920 pixels in 3 column themes. If your image has a different width, you can either resize your image or change the width of your blog´s layout (more complex) before you proceed with the steps below. The height doesn´t matter.

Step 1: Open the header template (header.php) and find this code:

<!- - HEADER - -><div id="header">

<div id="headerleft"></div>
<div id="headercenter">

<div id="headerright"></div>

</div><!- - END HEADER - ->

Step 2: Delete everything between the opening header DIV tag
<!- - HEADER - -><div id="header">
and the closing header DIV tag
</div><!- - END HEADER - ->

Step 3: Paste the HTML code for your custom header graphic between the opening and closing header DIV tags, so it now should look something like this:

<!- - HEADER - -><div id="header">

<img style="float: left" src="IMAGE_URL" width="" height="" alt=""/>
</div><!- - END HEADER - ->

Step 4 (optional): Now that you have replaced the entire header with your custom image, you might want to use the top navigation bar to display some important links, a search box and the RSS button. To activate it, simply remove the PHP comment ( // ) from the following line, quite at the bottom of the header template:

// include (TEMPLATEPATH . "/topmenu.php");

Step 5: After saving the updated header template, you still need to make a little update to the stylesheet(s), changing the height of the header DIV from 100 pixels to whatever your image has in height. Depending on which color scheme and border style you are using in your theme, you need to make these changes to one of the following stylesheets:

style.css (default stylesheet)

If you are not sure, simply update all of the above. Load the stylesheet(s) into the editor and find the CSS ID for the header in line 32 ( #header ). Change the value of the “height” property to the actual height of your header image.

#header {
width: 780px;
height: 100px;
background-color: #FFFFFF;
padding: 0;
margin: 0 0 5px 0;
position: relative;

Social Bookmarks: - (what´s this?) - spread the word!

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

If you want to leave a feedback to this post or to some other user´s comment, simply fill out the form below.