Using A Dynamic Header

The Revolution theme is currently using an image for the logo in the upper left hand section of the header. Some bloggers wish to use a dynamic call for the blog title and the blog description. With the help of this tutorial, changing the code from a static image to a dynamic call is really easy.

The first thing you need to do is add padding to the top of the #headerleft section inside the style.css file. Look for this piece of code towards the top of the file:

#headerleft {
width: 460px;
float: left;
font-size: 14px;
margin: 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

As you can see, that section currently has a top padding of 0px, which allows the logo.gif to stay at the top of the container. What you will want to do is change the top padding to 30px, so your code should look like this:

#headerleft {
width: 460px;
float: left;
font-size: 14px;
margin: 0px;
padding: 30px 0px 0px 0px;
overflow: hidden;
}

The other thing that you will need to change is the code for the #headerleft container which can be found within the header.php file. Look for this piece of code:

<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>

You will want to replace that code with this:

<div id="headerleft">
<a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a><br />
<?php bloginfo('description'); ?>
</div>

At this point, all you need to do is simply upload your style.css and header.php files onto your server and replace the ones that are currently there. Refresh your screen, and voila, you now have a dynamic header!