Clickable Header Image in Thesis Theme

This is a short tutorial to show you how to replace the usual logo text in your header with a clickable image in Thesis theme. To do this simply put the code below into your custom.css file.

.custom #header #logo a {
display:block;
width:500px;
height:100px;
background:url(URL TO YOUR IMAGE) center no-repeat;
outline:none;
text-indent:-9999px;
padding:0em;
border:0em;
margin:0em;
}

.custom #header #tagline {
text-indent:-9999px;
}

This CSS code will move the existing text out of the screen and put an image in its place. Replace “URL TO YOUR IMAGE” with an actual URL where your image is saved.

You can see the example of how I did it on my Twitter Tips blog. You’ll also have to change height and width values according to your image size.

There may be better ways to put clickable image in the header, but this worked for me. I have tested it in Firefox 3.5 and Internet Explorer 8 and it looks OK.

If you have a better solution, please let us know in the comments.

1. How to Add Custom Banner Ad in Thesis Theme Header
2. Thesis Theme Tutorial: How to Add a Second Navigation Menu
3. HeGeeks is Powered by Thesis Theme
4. How to: Add Tweetmeme Button to Byline