Thesis Tip #11 – Clickable Logo in Header

by Bill Erickson on January 20, 2010

Post image for Thesis Tip #11 – Clickable Logo in Header

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.

  1. First, upload your logo to the  /custom/images folder.
  2. Go to Thesis Options, and click “Header” under Display Options. Make sure “Show site name in header” is selected (it is by default).
  3. 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!

All Thesis Tips:

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis or Genesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).

{ 6 comments… read them below or add one }

Wolf February 24, 2010 at 5:29 am

Hi there
Thanks for this, got my logo up and dispalying!

Reply

Mark Stevens February 26, 2010 at 7:35 pm

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.

Reply

Mark Stevens March 2, 2010 at 10:48 pm

Ohh… that's what the -9999px text-indent is about, sliding the text out of view? And Google's not wise to that technique?

Reply

uberrealty March 5, 2010 at 3:11 am

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>

Reply

uberrealty March 5, 2010 at 3:46 am

Just at the end of the page?

Jim

Reply

Dawn Farias April 15, 2010 at 9:47 pm

Perfect. Thank you!

Reply

Leave a Comment

{ 2 trackbacks }

Previous post:

Next post: