Making Header Image Click-able

ruhi · Member · Dec 29, 2007 at 7:01 pm
Copy link

Add topic to favorites
I know this question has been asked umpteen number of times before, but I’m not being able to figure out a way to make my header image link back to my main page. I don’t like the “Back to Home Page” Widget very much.

I removed the blog title and the description from the style sheet because they looked plain ugly with the rest of the design
thesacredpath · Member · Dec 29, 2007 at 7:05 pm
Copy link
Making the header image clickable as I understand it would require access to the underlying program files, something that we do cannot do here at wordpress.com.
thesacredpath · Member · Dec 29, 2007 at 7:12 pm
Copy link
With Sandbox being so “wide open” to CSS customization, perhaps one of the CSS guru’s will have an idea.
ruhi · Member · Dec 29, 2007 at 7:14 pm
Copy link
thesacredpath,

I really hope so! I have seen some great help (you being one of them) with CSS in this forum. I’ve picked up the basics after reading all the help posts.
timethief · Member · Dec 29, 2007 at 7:19 pm
Copy link
@ruhi
Here you go http://archgfx.net/blog/2006/geek/blogging/custom-header-in-css
thesacredpath · Member · Dec 29, 2007 at 7:25 pm
Copy link
Wow! timethief to the rescue. I’ve bookmarked that for future reference.
timethief · Member · Dec 29, 2007 at 7:27 pm
Copy link
@tsp
BIG GRIN I knew you would. ;)
ruhi · Member · Dec 29, 2007 at 8:10 pm
Copy link
timethief,

thanks for the link. I’m tweaking the code to get it to work with my blog.
```
h1 a {
display:block;
text-align:left;
background: url(http://farm3.static.flickr.com/2126/2145490721_ac2f0708b6_o.jpg) top center repeat-x;
height:200px;
width:1263px;
border:1px solid #FFFFFF;
text-indent: -9000px;

}
```
As you can see, I had to change the height, the width and the ‘no repeat’ to ‘repeat-x’. I also removed the image link from this part-
```
body {
	background:#fff
	color:#000;
	font-family:'arial', sans-serif;
	font-size:0.8em;
	line-height:1.4em;
	margin:0;
	padding:0;
}
```
If I do it this way, then the image is in the blog header, but there is a big gap of around 200 px above the image. Is there any way I can shift the image to the top of the page?

(My blog doesn’t show this new code now. I was trying it using the preview function).
ruhi · Member · Dec 30, 2007 at 1:46 pm
Copy link
All right! So I finally have a header that links to my home page :) I used this code:
```
#blog-title {
	color:#fff;
}

#blog-title a {
	color:#fff;
	text-decoration:none;
	position:absolute;
	left:15px;
	top:-30px;
	width:1236px;
	height:190px;
}

#blog-title a:hover {
	color:#fff;
	text-decoration:none;
}

#blog-description {
	display:none;
}
```
Basically, what I’ve done here is removed the blog description by setting it to display:none; (like I did before). Next, the color of “blog-title” and “blog-title a” have been set as the body background color (which was #fff for me). This doesn’t really matter because what I do is-push off the blog title text off the page by setting the top to -30px. I also gave the blog title-a width and height values- same as the custom header size. That’s it! Fairly simple. :)

Hopefully, it will help someone.

No items found.