Support » Fixing WordPress » Header Image Link

  • I know that this has been addressed in this forum, but from reading past posts, I can’t figure out what to do.

    Using WP 1.5 and default Kubrick theme, I’d like to my header image a link to the home page of the site. How do I do that?

    thanks in advance for the help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • There’s a Q&A at the Kubrick page. That solution unfortunately relies on JavaScript.

    I put a link with no text in it (one space character) inside the header div and in CSS made the link very high and wide:
    #header a:link, #header a:visited {
    display:block; border: 0;
    width: 380px; height: 118px;
    }

    Hope that helps 🙂
    (those dimensions are not for Kubrick’s header, and it’ll probably work with just #header a)

    Thanks, Minna. Unfortunately, that didn’t work for me:

    http://www.tatteredcoat.com/

    Ya gotta change the dimensions specified in the CSS to match those of your header image.

    The problem, I think, is with the class “invisible” that says the element is “display: none”. I think that makes the element non-existent. If you removed the class=”invisible” from the <h1> in your <div id="header"> and removed the text you have inside the link there (replaced it with a space), it should work. So:
    <div id="header">
    <div id="headerimg">
    <h1><a href="http://www.tatteredcoat.com"> </a></h1>
    <div class="invisible">a paltry thing</div>
    </div>
    </div>

    instead of what you’ve got there now (of course, you’ll have php in there, but you get the point 🙂 ) and then put something like
    #headerimg a {
    display: block;
    height: 200px;
    width: 100%;
    border: 0;
    }

    in your CSS. You may need to make the height smaller because there are a lot of paddings

    If you’re afraid of messing it up, just comment out the parts you’d remove

    hold on–didn’t see your reply, Minna. I think you’re right about the invisible class…let me work on that.

    well… um, try display: inline;

    ok, Minna–you’ve definitely helped me move forward–I’m almost there.

    Here’s what I don’t understand. The header image is 760×200. You had me set the header link in the style sheet to be 200 px high. But if you look at the site now, you’ll see that the image is a link around the coat, but not around the words that form the title of the blog. do you know why that’s happening?

    thanks SO much for your help!

    yup I do 😀 there’s a humongous padding for the h1 (70px or something). Can’t remember where I saw it (there are several style definitions for h1 in the stylesheet) but it’s there somewhere. If you don’t have any other h1’s on the site (which I think you don’t), you could remove the top padding for h1

    Here:
    /* Begin Headers */
    h1 {
    padding-top: 70px;
    margin: 0;
    }

    oh, you rock, Minna. Thanks so much.

    woohoo!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Header Image Link’ is closed to new replies.