Need help? Check out our Support site, then


Header link

  1. Is there any way I can link my picture header to the main page?

    My blog is http://clarkie604.wordpress.com

    The text in the header is turned off with

    #header a {
    	display:none;
    }

    Now if you click through to see a post's comments there is no easy way to get back to the main page. I would like to be able to click the header image and return to the main page.

    Thanks.

  2. Do you have the CSS upgrade?

  3. yes

    The template is Treba and I've changed a bunch of stuff -- including replacing the text blog title with a background image.

  4. Okay.

    I did something like that on one of my blogs (I'm using Sandbox, though). The way I did it was like this:

    First off, backup your current CSS. It's just good practice ;)

    I used a text widget. Let's say you use the text widget Text 1 (they go from 1 through 9). I will assume that the IDs and Classes added in Sandbox will be added in your current theme as well. So, the element ID would be: text-1

    So, in your text widget, you could add the following code:

    <a title='Clark Kids' href='http://clarkie604.wordpress.com'>
    <span>« Home</span>
    </a>

    Save.

    Now, in your CSS code, you could define the rules for the text widget like this:

    #text-1 {
         background:none;
    }
    
    #text-1 h3,#text-1 h3.widgettitle {
         display:none;
    }
    
    #text-1 a {
         position:absolute;
         top:0;
         left:0;
         width:845px; /*suggested value*/
         height:145px;  /*suggested value*/
         display:block;
         border: solid 1px #f00;  /*This property is ONLY so you can see where the 'link' is being placed, once you have everything ready, you should remove it.*/
    }
    
    #text-1 a span {
    display:none; /*This is so '« Home' won't be displayed*/
    }

    You might need to play with the margins... If so, I suggest you place your rules in the #text-1 selector definition.

    That's all.

    If you use the text widget Text 3 Instead of using #text-1, you should use #text-3.

    This is one way to do it.

    HTH

  5. BTW, the above post, is mine... forgot to log out... I hate when that happens!

  6. ... lol .. :D

  7. Thanks -- that worked beautifully and the text widget trick will be very helpful when I need a little html in the future. The margins aren't perfect but I'll work on them.

  8. Wow! Your blog looks great!

  9. Glad it worked.

    I don't know if you'll come back here, but just in case you do, try this:

    #text-2 a {
    	position:absolute;
    	top:75px;
    	margin: 0 0 0 -520px;
    	width:650px;
    	height:100px;
    	display:block;
            border: solid 1px #f00;  /*remember to remove this*/
    }

    You can play with the negative value...

    HTH

  10. Is there any way to center the link box? I had the whole blog centered and liked it better that way but the link box placement wasn't consistent because of screen width variations. So I left justified the blog and the link box is consistent even if you have a wide screen. But I'd like the blog to be centered. Any way to center an element with an absolute position?

  11. Did you try the code I posted above? It work for me when I tested it.

  12. Great, I got it to work with the link!
    But I am really new at this...the problem is that
    the code shows up in the blog.... please,
    maybe just something that needs to be taken out...?

    div.comment-avatar {
    display:inline;
    }

    #text-1 {
    background:none;
    }

    #text-1 h3,#text-1 h3.widgettitle {
    display:none;
    }

    #text-1 a {
    position:absolute;
    top:0;
    left:110px;
    width:780px;
    height:180px;
    display:block;
    border:solid 1px #f00;
    }

    #text-1 a span {
    display:none;
    }

  13. Thanks devblog. You are the man. So now my question is: why did that work? It must have something to do with the negative margin. How does a negative value work?

  14. clarkie604,

    Glad to know it worked. Now, to answer your question, the negative margin worked because the text-2 element, without the left property, is automatically positioned in relation to the sidebar, which is its parent element. That's why we needed to move it to the left using the negative values.

    Best!

    kaminipress,

    You need to have the CSS upgrade to implement the code. You'd need to paste the code in the CSS editor in your admin area, not on your post.

    HTH

  15. hi devblog,
    thanks for your reply - yes i have the upgrade and i pasted the code in at the end of the present code.
    hmmm...
    Best

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags