Jump to content

Replace H1 Tag Header With Image?


Recommended Posts

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">
         <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; ?> 
     </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; ?>
     </div><!--end navigation-->
    </div><!--end wrapper-->


CSS is


------------------------------------------------------------ */
#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 by webgyrl
Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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 by OJB
Link to comment
Share on other sites



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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...