Linking custom header to home page

  • Author
    Posts
  • #312804

    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

    #313063

    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

    #313064

    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.”

    #313066

    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. :)

    #313071

    vivianpaige
    Member

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

    #313073

    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.

    #313078

    vivianpaige
    Member

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

    #313079

    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

    #313081

    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.

    #313087

    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.

    #313088

    vivianpaige
    Member

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

    #313093

    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.

    #313094

    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.

    #313096

    vivianpaige
    Member

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

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

    #313097

    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

    #313102

    vivianpaige
    Member

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

    #313105

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

    #313116

    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.

    #313117

    Same to you devblog.

    #313118

    aw1923
    Member

    Hey, Happy New Year to you too.

The topic ‘Linking custom header to home page’ is closed to new replies.