Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Linking custom header to home page

  1. khartline
    Member

    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 (http://khartline.com) 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!
    Karen

  2. aw1923
    Member

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

    <a title='HOME' href='http://sensico.wordpress.com/'>
<span>« Home</span>
</a>

    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. vivianpaige
    Member

    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. khartline
    Member

    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. vivianpaige
    Member

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

  6. aw1923
    Member

    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. vivianpaige
    Member

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

  8. vivianpaige
    Member

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

  9. aw1923
    Member

    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. vivianpaige
    Member

    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. vivianpaige
    Member

    Ah - I remember now. There is another trick to use for positioning a text widget. See this thread http://en.forums.wordpress.com/topic/add-tagline-to-rubric?replies=26

  12. aw1923
    Member

    cool, if she entered this into her text widget

    <div class="mytagline">
<a title='HOME' href='http://khartline.com/'>
<span>« Home</span>
</a>
</div>

    and then put this in her CSS, 

    .mytagline {
     position: absolute;
font-size:12px;
height:38px;
margin-left:-500px;
margin-top:-1180px;
padding-left:40px;
padding-top:10px;
height:203px;
width:150px;
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. devblog
    Member

    may I pitch in my pennies worth?

    khartline,

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

    height:203px;
width:1150px;
display: block;

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

    #masthead h1 a {
color:#fff;
text-decoration:none;
text-transform:uppercase;
height:203px;
width:1150px;
display: block;
}

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

  14. vivianpaige
    Member

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

    Here is how you make a clickable header http://en.forums.wordpress.com/topic/custom-header-in-the-journalist?replies=1#post-172402

  15. aw1923
    Member

    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. vivianpaige
    Member

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

  17. thesacredpath
    Staff

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

  18. devblog
    Member

    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 {
color:#fff;
text-decoration:none;
text-transform:uppercase;
height:203px;
width:1150px;
display: block;
text-indent:-9000px;
}

    Happy New Year, everyone.

  19. thesacredpath
    Staff

    Same to you devblog.

  20. aw1923
    Member

    Hey, Happy New Year to you too.

  21. khartline
    Member

    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 home...no 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. thesacredpath
    Staff

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

  23. vivianpaige
    Member

    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

Tags