WordPress.org

Ready to get started?Download WordPress

Forums

Need help with header image (5 posts)

  1. ninjagrrl
    Member
    Posted 7 years ago #

    I really want to make my header image clickable, I did some searching yesterday and found some people who had used javascript but I wanted to avoid that route if I could. I found Podz tutorial today, but he calls upon some classes in the style.css file that I don't have, so I am kind of stuck. Does anyone know how to make the header image clickable so you can disable the title from showing up in text, without using java or javascript. Thanks in advance.

  2. Doodlebee
    Member
    Posted 7 years ago #

    What theme? And if you don't have particular classes in your style.css file, add them in.

    But a theme name would be nice - we have no idea what you're trying to edit.

    The easiest way to make an image "clickable" is to wrap it in anchor tags.

  3. ninjagrrl
    Member
    Posted 7 years ago #

    I am sorry, the theme is fSpring, the original theme is here http://www.fahlstad.se/demo/index.php?wptheme=fSpring

    Thanks for any help you might be able to provide.

    Sincerely,
    Heather

  4. ekusteve
    Member
    Posted 7 years ago #

    Not exactly sure about your theme, but here is what I did for the default theme to make an image I created for the header clickable.

    Open header.php in the theme and change the header information near the bottom to:

    <div id="header"> <div id="headerimg" onclick="location.href='http://enter_your_blog_url/';" style="cursor: pointer;" title="Home">
    </div>

    Steve

  5. Doodlebee
    Member
    Posted 7 years ago #

    What Steve suggests would work - but it's using javascript (which you said you'd like to avoid).

    I think the *easiest* method would be to take the background image out of the #logo div and just put the image in the HTML. So instead of this:

    <div id="logo">
    </div>

    You have this:

    <div id="logo">
    <a href="link">
    <img src="images/top.png" />
    </a>
    </div>

    And remove the background stuff from the #logo in your stylesheet.

    This *will* cause your tagline to push down below the header, but you can adjust it with some negative margins. So your #tagline ID - which already has a negative margin - would just need that increased to lay over the header image. Add a z-index of 1000, relative positioning, and just use your margins to put it where you want it.

Topic Closed

This topic has been closed to new replies.

About this Topic