Using a Full Width Header Image

Some people have asked me if it’s possible to make their header/logo image full width with this theme, and the answer is yes. It requires making a few changes to the code, which I will walk you through below.

The first thing you need to do is eliminate the header image url (currently displaying the magnifying glass and the gray shaded box) from the style sheet. This can be done by changing to the code below:

#header {
background: #FFFFFF;
width: 920px;
height: 110px;
color: #202020;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
border-bottom: 5px solid #D5D5D5;
}

You will also need to add this code to the style sheet:

#header a img {
border: none;
margin: 0px;
padding: 0px;
}

The next thing you need to do is to upload your new image - to make things easy, continue to use the filename logo.gif and keep it in the theme’s images folder. After you do that, you will need to make the following change to your header.php file. Currently, your header code looks like this:

<div id="header">
<div id="headerleft">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<div id="headerright">
<b>Looking for something in particular?</b><br />
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="To search, type keywords and hit enter..." name="s" id="s-head" onfocus="if (this.value == 'To search, type keywords and hit enter...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'To search, type keywords and hit enter...';}" /></form>
</div>
</div>

You will want to delete the calls for <div id="headerleft"> and for <div id="headerright"> and your new code should look like this:

<div id="header">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a>
</div>

Since you are making the logo full width, there is no longer a need for separate header containers, which is why you deleted them. Now your header logo should show full width, as well be linked to the blog’s home page url.