Need help? Check out our Support site, then

Linking custom header to home page

  1. I've upgraded so I can edit the CSS and am so close to having it the way I want it.

    I've added a custom header image and would like to have it link to my home page ( but can't figure out the CSS code or any way to do so. I also tried adding a 'page' as a HOME button (like the About Me), but it didn't work right either.

    Any easy ways to make this happen? Would love my readers to have an easy way to get back home, because there's no place like home. ;)

    Thanks and Happy New Year!

  2. what I did was create a text widget with this in it,

    <a title='HOME' href=''>
    <span>« Home</span>

    then I obtained the widgets ID number and adjusted it so that it would appear over my custom header. Today I'm tweaking my blogs CSS, so if you create the text widgets with the above code (obviously changing the URL), then I could try to do it for you, I'm hyper today :D

  3. Since you have custom CSS, you can make the header clickable. Take a look at the CSS on my blog to see how I did it or search the forums on "clickable header."

  4. aw1923--I just created the text widget with the correct home link. I saw a post about creating a widget and using it to layover the header image, tried it, but couldn't figure it out. Not sure I had the right text-1 code. Would love your help! Let me know next steps.

    vivianpaige--thanks for the lead. Will check it out if aw can't help. :)

  5. The text widget is much harder IMHO than the way I do it because it requires positioning the widget.

  6. I agree, Vivian's way is probably better and easier. I never understood why I chose the harder way. Maybe it's best to do it vivian's way right now, cause I'm still trying to figure out what the class would be for your CSS for that specific widget, unfortunately.

  7. aw - I'm having a bit of a brain lock. How do you find the widget ID number again?

  8. Let me rephrase - how do I find it on the MistyLook theme I'm using here? ttp:// I see it on my own blog but not on this one

  9. I don't think it could be done on these themes, maybe this can only be done on sandbox themes. When I find the ID, on the web developer toolbar I just goto
    information > ID & class details, but on the wordpress themes I also have to goto information > div order to get the ID number.
    the format is this "div .textwidget 35" but on mine and your sandbox themes the format is this "#text-216081651". I'm just thinking that this trick can only be done with sandbox themes, cause I tried different ways of changing the class to suit her theme and it hasn't worked yet, can't do it on the mistylook theme either.

  10. Thanks. The div order is not the same as the ID number (I saw the same thing - if you look closely, you will see that the div order # is just s chronological listing). So my brain wasn't completely locked up - the info I was looking for just isn't there.

  11. Ah - I remember now. There is another trick to use for positioning a text widget. See this thread

  12. cool, if she entered this into her text widget

    <div class="mytagline">
    <a title='HOME' href=''>
    <span>« Home</span>

    and then put this in her CSS,

    .mytagline {
         position: absolute;
    background:none; color: none;

    then it would position the text widget over the header, unfortunately it wont let my style the home link so you basically see the home link over the header. Maybe theres a way to style it in the text widget so that it looks invisible. And I'm still looking for a way to make it so that the link covers the whole header. Or maybe a better idea would be for her to create a home tab.

  13. may I pitch in my pennies worth?


    You could also try adding this attributes to your "#masthead h1 a" definition:

    display: block;

    So the whole selector's definition should look like this:

    #masthead h1 a {
    display: block;

    That would make your whole header clickable. It works in Fx3 but I haven't tested it in IE6, though.

  14. She could easily create a home tab by using the page trick.

    Here is how you make a clickable header

  15. OMG, that sucks I was playing around with that and it didn't work when I did it...OK to be honest I didn't add the "display:block" thingy

    devblog, your like superhuman/robot CSS person :D

  16. I figured he'd show up around here sooner or later and tell is what we missed ;)

  17. If you look CSS up in the dictionary, it says, see devblog.

  18. Thank you guys, you give me too much credit.

    BTW, I saw Vivian's post and hers is more complete than mine. My solution is lacking the "text-indent:" attribute. khartline, I think it'd be a good idea if you add it to the code I posted above so it reads like this:

    #masthead h1 a {
    display: block;

    Happy New Year, everyone.

  19. Same to you devblog.

  20. Hey, Happy New Year to you too.

  21. I love the community here. Thanks to all of you for your help!

    Devblog gets the cookie for this one. I don't understand how editing the masthead area with the simple code worked, but clicking on the header now takes me matter where I am.

    Vivian and aw--many gold stars to you for your efforts!

    And Devblog, I think Dorothy may be looking for you. She's always talking about finding a way home. ;)

  22. I gave you the solution to the comment background question in the other thread.

  23. devblog - I can't believe my code was more complete than yours! You're the master, I'm just a rookie student!

    And Happy New Year to everyone!

Topic Closed

This topic has been closed to new replies.

About this Topic