Replace H1 Tag Header With Image?

**webgyrl** · February 10, 2010

Can anyone help me with a little CSS/DIV issue?

I am trying to customize a Wordpress template and it is using an H1 tag to put in a text name which links to the domain. I want to replace this with a logo and it not be text.

Essentially I need to put in a DIV and style it with CSS right? And I guess float the logo left somehow?

How can I do this as I'm not exactly seeing where in the Header DIV it would go.

Code for header area (i think) is

> <body <?php body_class(); ?>>
 <div class="skip-content"><a href="#content">Skip to content</a></div>
 <div id="header" class="clear">
   <div id="follow">
     <div class="wrapper clear">
       <dl>
         <dt><?php _e('Follow:', 'titan') ?></dt>
           <dd><a class="rss" href="<?php bloginfo('rss2_url'); ?>"><?php _e('RSS', 'titan') ?></a></dd>
           <?php if ($titan->emailToggle() == 'true') : else : ?>
             <dd><a class="email" href="<?php if ($titan->feedEmail() !== '') echo $titan->feedEmail(); else echo "#"; ?>"><?php _e('Email', 'titan') ?></a></dd>
           <?php endif; ?>
           <?php if ($titan->twitterToggle() == 'true') : else : ?>
             <dd><a class="twitter" href="<?php if ($titan->twitter() !== '') echo $titan->twitter(); else echo "#"; ?>"><?php _e('Twitter', 'titan') ?></a></dd>
           <?php endif; ?> 
       </dl>
     </div><!--end wrapper-->
   </div><!--end follow-->
   <div class="wrapper">
     <?php if (is_home()) echo('<h1 id="title">'); else echo('<div id="title">');?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><?php if (is_home()) echo('</h1>'); else echo('</div>');?>
     <div id="description">
       <?php bloginfo('description'); ?>
     </div><!--end description-->
     <div id="navigation">
       <ul id="nav">
         <?php if ($titan->hideHome() !== 'true') : ?>
           <li class="page_item <?php if (is_front_page()) echo('current_page_item');?>"><a href="<?php bloginfo('url'); ?>"><?php _e('Home', 'titan') ?></a></li>
         <?php endif; ?>
         <?php if ($titan->hidePages() !== 'true') : ?>
           <?php wp_list_pages('title_li=&exclude='. $titan->excludedPages()); ?>
         <?php endif; ?>
         <?php if ($titan->hideCategories() != 'true') : ?>
           <?php wp_list_categories('title_li=&exclude=' . $titan->excludedCategories()); ?>
         <?php endif; ?>
       </ul>
     </div><!--end navigation-->
    </div><!--end wrapper-->

CSS is

>/*Header
------------------------------------------------------------ */
#header {
 width: 100%;
 border-bottom: 1px solid #EDE7E0;
 background: #443B31 url(../images/nav-background.gif) repeat-x bottom left;
 }
#follow {
 background: #2F2922;
 padding: 5px 0;
}
#follow dl {
 float: right;
 font-size: 1.3em;
 }
#follow dl dt, #follow dl dd {
 float: left;
 }
#follow dt {
 font-weight: bold;
 color: #AD9B83;
 }
#follow dd {
 margin-left: 20px;
 }
#follow dd a {
 display: block;
 color: #cfc4b6;
 }
#follow dd a.rss {  padding-left: 20px; background: url(../images/feed-icon.png) no-repeat 0 .2em; }
#follow dd a.email {  padding-left: 22px; background: url(../images/email-icon.png) no-repeat 0 .35em; }
#follow dd a.twitter {  padding-left: 19px; background: url(../images/twitter-icon.png) no-repeat 0 .15em; }
h1#title, div#title {
 float: left;
 padding: 30px 0;
 font-size: 3em;
 font-weight: bold;
 line-height: 50px;
 }
h1#title a:link, h1#title a:visited, div#title a:link, div#title a:visited  { color: #E9E5E0; }
h1#title a:hover, div#title a:hover { text-decoration: none; }

The area I want to change to a logo is here:

Where do I put the logo div and how do I also put that in the CSS but make sure everything still is the same height etc?

Thanks for any help you can give! If you want the CSS and PHP file, let me know and I'll supply it.

Edited February 10, 2010 by webgyrl

**webgyrl** · February 10, 2010

OK, been fiddling, and realize that this entire line controls the header area

><?php if (is_home()) echo('<h1 id="title">'); else echo('<div id="title">');?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><?php if (is_home()) echo('</h1>'); else echo('</div>');?>

If I comment that out the H1 goes away and the area collapses. My question is: do I have to put a div in there or is there some way to modify this line to accept my PNG image instead of doing it via Text H1?

I just don't want to be deleting or commenting out a portion of code that might be necessary for the template to work properly.

Thanks!

**OJB** · February 10, 2010

I have no idea why they would opt for a H1 when you are on the homepage and a div otherwise.

Backup your current template version, then change that line you have quote above to:

>
<div id="title"><a href="<?php bloginfo('url'); ?>"><img src="HTTP://WWW.YOURDOMAIN.EXT/YOURIMAGE.png" alt="<?php bloginfo('name'); ?>" /></a></div>

You might need to fiddle with the CSS, removing the padding for instance, not sure how it would render without seeing.

You might also need to specify border: 0px; on div#title a img

Edited February 10, 2010 by OJB

**webgyrl** · February 14, 2010

Hi OJB,

That solution worked. I just fixed the padding in the logo area and that worked with the img src tag. Thank you so much!

Sign In

Replace H1 Tag Header With Image?

Recommended Posts

webgyrl

webgyrl

OJB

webgyrl

Join the conversation

Hosting