Support » Themes and Templates » Need help with header image

  • ninjagrrl

    (@ninjagrrl)


    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Doodlebee

    (@doodlebee)

    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.

    ninjagrrl

    (@ninjagrrl)

    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

    ekusteve

    (@ekusteve)

    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

    Doodlebee

    (@doodlebee)

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Need help with header image’ is closed to new replies.