WordPress.org

Support

Support » Themes and Templates » [Resolved] Change the title to an image

[Resolved] Change the title to an image

  • ChadChandler
    Member

    @chadchandler

    My site: http://www.chadchandler.com/

    I hate to ask for help, as I’ve always been able to fix any problem I’ve faced so far. With the latest WordPress update, I lost my old theme. It was old and just wasn’t worth updating anymore. I chose to upload the Cleanr Theme (http://wordpress.org/extend/themes/cleanr). I’m trying (and failing in epic fashion) to make the title transparent and replace it with an image file.

    Here’s the original header CSS:

    /* HEADER */
    #header h1 {font-size:36px;padding:0;margin:25px 0;float:left;}
    #header h1 a {color: #c00;text-decoration: none;border:none}
    #header h1 a:last-letter {color:#c00;}
    #header span {font:13px Georgia; font-style: italic; color: #aaa; margin-left:20px;position:relative;top:-7px;letter-spacing: 0}

    Here’s what i have so far – I can see enough of the image that covers the hidden title, but nothing more. And I can see the title when hovering.

    /* HEADER */
    #header h1 {background: url("/images/punchlabel_cc_header.png") no-repeat left; padding:0;margin:18px 0;float:left;}
    #header h1 a {color: transparent;text-decoration: none;border:none;}

    Here’s the relevant Header code:

    <div class="container_16">
    <div id="header" class="grid_16">
     <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a><span class="description"><?php bloginfo('description'); ?></span></h1>

    What am I missing? I’m sure it’s a simple fix, but I’ve looked at it too long to see anything new. Any help you can provide would be greatly appreciated.

    Thanks,
    Chad

Viewing 6 replies - 1 through 6 (of 6 total)
  • Bill Erickson
    Participant

    @billerickson

    Try this (not tested so might need a bit of tweaking):

    #header h1 {
    background: url('images/punchlabel_cc_header.png') no-repeat;
    display: block;
    float: left;
    height: 52px;
    margin: 18px 0;
    text-indent: -9999em;
    width: 392px;
    }
    
    #header h1 a {
    display: block;
    height: 52px;
    outline: none;
    width: 392px;
    }

    ChadChandler
    Member

    @chadchandler

    Thanks, Bill. I pasted the code and it was effective at hiding the title, but it also hid the image file. If you look at it now, you can see the results.

    keesiemeijer
    Moderator

    @keesiemeijer

    change this:
    background: url('images/punchlabel_cc_header.png') no-repeat;
    to this:
    background: url('/images/punchlabel_cc_header.png') no-repeat;

    ChadChandler
    Member

    @chadchandler

    Thanks, keesiemeijer, but still nothing. If I highlight the area, it appears that the image is there (at least the width of the area is the width of the image file), but I still can’t see it. Any other ideas?

    All of your input is very much appreciated.

    Chad

    keesiemeijer
    Moderator

    @keesiemeijer

    And if you put it in the anchor:

    #header h1 a {
    background: url('/images/punchlabel_cc_header.png') no-repeat;
    display: block;
    height: 52px;
    outline: none;
    width: 392px;
    }

    ChadChandler
    Member

    @chadchandler

    That did it!

    Thanks, keesiemeijer.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Change the title to an image’ is closed to new replies.