WordPress.org

Ready to get started?Download WordPress

Forums

Header Image Link (10 posts)

  1. mkgago
    Member
    Posted 9 years ago #

    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.

  2. Minna
    Member
    Posted 9 years ago #

    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)

  3. mkgago
    Member
    Posted 9 years ago #

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

    http://www.tatteredcoat.com/

  4. satoshi
    Member
    Posted 9 years ago #

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

  5. Minna
    Member
    Posted 9 years ago #

    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

  6. mkgago
    Member
    Posted 9 years ago #

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

  7. Minna
    Member
    Posted 9 years ago #

    well... um, try display: inline;

  8. mkgago
    Member
    Posted 9 years ago #

    ok, Minna--you've definitely helped me move forward--I'm almost there.

    Here's what I don't understand. The header image is 760x200. 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!

  9. Minna
    Member
    Posted 9 years ago #

    yup I do :D 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;
    }

  10. mkgago
    Member
    Posted 9 years ago #

    oh, you rock, Minna. Thanks so much.

    woohoo!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.