This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.
Update: As of Thesis 1.8, you can use the new Header Image option in the Thesis menu. In the admin area just go to Thesis > Header Image to upload your image. The way described below still works (and is what I do), but this new way will let you add a logo without editing code.
—
One of the most common modifications to the Thesis theme is replacing the header text with your own custom logo or image. What a lot of people forget to do is add a bit more code to make that logo clickable.
- First, upload your logo to the
/custom/images
folder. - Go to Thesis Options, and click “Header” under Display Options. Make sure “Show site name in header” is selected (it is by default).
- Open custom.css, and paste the following code. Make sure you change the height and width to match your logo’s dimensions:
.custom #logo {background-image: url('images/logo.jpg'); background-repeat: no-repeat; width: 170px; height: 145px; text-indent: -9999px; }
.custom #logo a {width: 170px; height: 145px; display: block; outline: none;}
That second line is what a lot of people forget. If you don’t include it, you’ll have the logo up there but it won’t be clickable. Now, when someone clicks it they are sent to the homepage.
And that’s it!
Wolf says
Hi there
Thanks for this, got my logo up and dispalying!
Mark Stevens says
Won't this detract from a site's SEO? I'd prefer to be more creative with my header than the default text, but I don't want to discourage my page rank either.
Mark Stevens says
Ohh… that's what the -9999px text-indent is about, sliding the text out of view? And Google's not wise to that technique?
uberrealty says
How would I insert a header that is an iframe. It is linked to my search site.
Here is the target for the iframe:
http://www.uberrealty.com/main.mvc/embeddedsearch
Code is:
<iframe width="100%" height="100" frameborder="0" scrolling="no" src="http://www.uberrealty.com/main.mvc/embeddedsearch>
</iframe>
uberrealty says
Just at the end of the page?
Jim
Dawn Farias says
Perfect. Thank you!
ramesh says
Thank you Bill. Your designs are really great and inspiring. And Thank you for sharing some really great thesis techniques.
Moviemath says
Internet Explorer likey this code, Firefox and Safari not likey… Cross browser compatible code available? 🙂
Bill Erickson says
This code works in every browser I’ve tested it in, including Firefox and Safari.
Moviemath says
To redefine and clarify, yes it works – that is logo is clickable – but the clickable dimensions in Firefox and Safari have been reduced to the size and area of the header text only, not the dimensions of the logo, which oftentimes is larger if containing a tagline as part of the overall logo image file. Thanks for the quick reply earlier.
Bill Erickson says
By making the height and width of
.custom #logo a
the same as the image, you will make the clickable area the size of the logo image file.