Header link

clarkie604 · Member · Nov 7, 2007 at 7:31 pm
Copy link

Add topic to favorites
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.
devblog · Member · Nov 7, 2007 at 10:24 pm
Copy link
Do you have the CSS upgrade?
clarkie604 · Member · Nov 7, 2007 at 11:18 pm
Copy link
yes

The template is Treba and I’ve changed a bunch of stuff — including replacing the text blog title with a background image.
ston3r · Member · Nov 8, 2007 at 12:25 am
Copy link
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
devblog · Member · Nov 8, 2007 at 12:26 am
Copy link
BTW, the above post, is mine… forgot to log out… I hate when that happens!
timethief · Member · Nov 8, 2007 at 12:49 am
Copy link
… lol .. :D
clarkie604 · Member · Nov 8, 2007 at 1:39 am
Copy link
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.
timethief · Member · Nov 8, 2007 at 1:50 am
Copy link
Wow! Your blog looks great!
devblog · Member · Nov 8, 2007 at 2:50 am
Copy link
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
clarkie604 · Member · Nov 8, 2007 at 4:59 pm
Copy link
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?
devblog · Member · Nov 8, 2007 at 6:04 pm
Copy link
Did you try the code I posted above? It work for me when I tested it.
kaminipress · Member · Nov 8, 2007 at 6:46 pm
Copy link
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;
}
clarkie604 · Member · Nov 8, 2007 at 7:14 pm
Copy link
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?
devblog · Member · Nov 8, 2007 at 8:30 pm
Copy link
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
kaminipress · Member · Nov 9, 2007 at 8:59 am
Copy link
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

No items found.