Support » Themes and Templates » Replace blog title with an image

  • 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

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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.

    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.

    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

    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.

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

    Happy New Year

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Replace blog title with an image’ is closed to new replies.