WordPress.org

1. Alexander Stanuga
   Member
   Posted 2 years ago #

   Hi there I'm new to WordPress (as of 2 weeks ago)

   I have been having a lot of trouble trying to replace my blog text with an image. I know this is a common topic in many forums, which I have come across, yet I'm still a bit stuck. To explain, I followed an 11 part "how to create a WordPress theme" tutorial on themeshaper, and as a result the code within header.php is a little different from all the other examples I have come across over the past days searching.

   <div id="branding">
       <div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>
   <?php if ( is_home() || is_front_page() ) { ?>
           <h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>
   <?php } else { ?>
           <div id="blog-description"><?php bloginfo( 'description' ) ?></div>
   <?php } ?>
      </div><!– #branding –>

   I'm currently working offline so unable to point to the uploaded page atm. If anyone is able to help out I'd really appreciate it.

   Thanks

2. Alexander Stanuga
   Member
   Posted 2 years ago #

   
   

3. alchymyth
   The Sweeper
   Posted 2 years ago #

   this might lead you a bit further ...
   http://codex.wordpress.org/Designing_Headers#Making_the_Whole_Header_Clickable

4. wlowden
   Member
   Posted 2 years ago #

   If I'm looking at yor post right, o are trying to replace or blog title with an image. To do that add the image to yor images folder and then add the image to background property for "blog-title" div. Next remove /" title="<?php bloginfo( 'name' ) from div tag for "blog-title". This code is what displays the title of your blog. Hope that helps.

5. Alexander Stanuga
   Member
   Posted 2 years ago #

   alchymyth I have been through that post a few times and tried it out but I still don't understand where I'm going wrong.

   wlowden Thanks for that I took your advice, but still can't get it to work, could the span tag be effecting it at all? I tried changing the CSS to #blog-title span but that didn't fix it either.

6. alchymyth
   The Sweeper
   Posted 2 years ago #

   try - from this:
   

   <div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>

   to this:
   

   <div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><img src="<?php bloginfo( 'template_url' ); ?>/images/headerimage.jpg" /></a></span></div>

   assuming that your header image is in the /images folder of the theme and is called headerimage.jpg.
   the rest is down to css styles.
   good luck ;-)

   if the blog description gets into the way, try to add
   #blog-description {display:none;}
   to style.css

7. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   Try changing:

   <div id="branding">

   to

   <div id="branding"><span class="header-img"></span>

   Then assign a specific width and height to #branding. Assign the same width and height to #branding .header-img but also add display:block;, absolute positioning, a high zoom-index and, of course, your image as a background. That should force .header-img to overlay the entire branding div.

8. Alexander Stanuga
   Member
   Posted 2 years ago #

   AHA!! Did it! your code worked out alchymyth, thank you so much guys, looks heaps better.

   Happy New Year

Topic Closed

This topic has been closed to new replies.