Fixing Header in Theme

If you check out the header.php file of the theme, you’ll find this code:

<div id="logo">

	<?php if(get_option('logo_pic')) { ?>

		<a href="/" title="home"><img src="<?php bloginfo('template_directory'); ?>/images/logos/<?php echo get_option('logo_pic');?>"></a>

	<?php } else { ?>

		<div id="desc">

			<a href="/" title="home"><div class="title"><?php bloginfo('name'); ?></div></a>

			<div class="slogan"><?php bloginfo('description'); ?></div>

		</div>

	<?php } ?>

</div>

So it is using a conditional statement to display the logo if there is one, or the title and description if there isn’t a logo.

You could replace that with this code here:

<div id="logo">

	<?php if(get_option('logo_pic')) { ?>

		<a href="/" title="home"><img src="<?php bloginfo('template_directory'); ?>/images/logos/<?php echo get_option('logo_pic');?>"></a>

		<div id="desc">

			<a href="/" title="home"><div class="title"><?php bloginfo('name'); ?></div></a>

			<div class="slogan"><?php bloginfo('description'); ?></div>

		</div>

	<?php } else { ?>

		<div id="desc">

			<a href="/" title="home"><div class="title"><?php bloginfo('name'); ?></div></a>

			<div class="slogan"><?php bloginfo('description'); ?></div>

		</div>

	<?php } ?>

</div>

That code will load the logo, title, and description if there is a logo, or just the title and description if there is no logo.

However, you will probably have to modify your CSS to get them to layout exactly how you want them to.

Thank you so much for the pointers. I will check this out today and let you know how it works out.

Thanks!

I changed the PHP code as you suggested and it now displays the title and description.

However, I can’t get ANY property changes I make to CSS for the title and description to show on the website. I’m trying to get them positioned to the right of the logo, but I can’t figure this out and am now going in circles.

I’m figuring something’s overriding any change I make but I can’t find what it is. Any help in solving this would be greatly appreciated.

Firebug is always a big help with these kinds of tweaks. Are you editing the style.css file? The other stylesheet, ie.css, only runs in IE.

Usually, it is just because there is more than one rule affecting the same element and your change doesn’t take priority. You can add a higher level element to your rule to give it higher priority.

All the elements you want to tweak are in the header, so try adding the header id, #header to the rules like the ones below.

All three elements are in a div with the ID of “logo”. You need to make that div bigger so it all fits, like this:

#header #logo {
float:left;
height: auto;
width:886px;
}

Now tweak the “desc” div to fit next to it:

#header #desc {
float:left;
margin:10px 0 5px 10px;
width:637px;
}

Finally, you might want to shrink the title a bit so that it fits better:

#header #desc .title {
color:#FF0000;
display:block;
font-size:45px;
font-weight:normal;
line-height:55px;
text-shadow:2px 2px 0 #CCCCCC;
}

Thanks.

I figured out that the reason the changes I made weren’t showing was because my browser (Firefox) was using a cached copy instead of a new copy.

Let me look at this over the weekend.

Thanks so much for the help.

I took a look at this again tonight. I got everything tweaked to where it’s acceptable for now, thanks to your help.

Also, thanks a bunch for the tip on Firebug. I have a lot to learn about everything web related and this will make it much easier. All I have to do now is learn how to use Firebug.

Thanks!

No problem, glad you got a figured out. Yeah, Firebug is awesome!