WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change the title to an image (7 posts)

  1. ChadChandler
    Member
    Posted 3 years ago #

    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

  2. Bill Erickson
    Member
    Posted 3 years ago #

    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;
    }
  3. ChadChandler
    Member
    Posted 3 years ago #

    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.

  4. keesiemeijer
    moderator
    Posted 3 years ago #

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

  5. ChadChandler
    Member
    Posted 3 years ago #

    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

  6. keesiemeijer
    moderator
    Posted 3 years ago #

    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;
    }
  7. ChadChandler
    Member
    Posted 3 years ago #

    That did it!

    Thanks, keesiemeijer.

Topic Closed

This topic has been closed to new replies.

About this Topic