How to add a Logo or clickable Header image in Thesis 2.0

First of all we need to upload an image and set it in right place for Header. To do so, please check this link.

After that, we will proceed with removing the Site Title, Site Tagline and making our Header image / logo link to home page of our site.

Here is a quick 10-step tutorial to make it work perfectly!

  1. Login to WordPress admin and go to Thesis admin page.

  2. Switch to HTML Skin editor and click Header box. All the boxes under Header will be visible then.

  3. From here, you can shift+drag Site Tagline box to the upper right box where it says “shift+drag boxes here to remove them from the page”.

  4. Now hit the green Save Template button.

  5. Next, switch to CSS tab in Skin editor.

  6. Look for Site Title package in the list of packages on right and click it to make some changes.

  7. In the pop up box for Site Title Package, click on Additional CSS tab.

  8. This section allows us to add our custom CSS for Header. Just like it used be custom.css in previous versions.

  9. Now, add the following to the box :
    #site_title a  {display: block; text-indent: -9999px; width: 960px; }
    You can replace value for width with the width of your site or width of your logo.

Hit the big green, Save  CSS button and check your site.

Here is an explanation of CSS code that we have added:

display: block makes the title link appear as a block element

text-indent:-9999px indents the text 9999 pixels away from the site’s visible area. This is a trick to hide the text from header.

width:960px is used to define with width of header link or in other words clickable header area. If your logo is 200px wide then you can use that value instead of 960px.

Check out mobile responsive Thesis 2.0 Skins

Get free e-mail updates

{ 18 comments… add one }

  • Dawson November 6, 2012, 3:52 pm

    Thanks for the detailed article. Does your skins got an inbuild option to do this more instantly?

    Reply
    • Puneet November 6, 2012, 8:06 pm

      Yes, both the Skins come with a Logo Box. I will be building a new box which gives complete control over Site Title, Tagline and Logo/Header image.

      Reply
  • will crist December 10, 2012, 10:45 am

    When will you have the new box to give complete contro over Site Title, Taglone and Logo/Header image?

    Where can we get it?

    Reply
    • Puneet December 11, 2012, 10:42 pm

      Sorry, I haven’t got a chance to work on it yet.

      Reply
  • Dionna Mash December 11, 2012, 12:22 pm

    Hi Puneet,

    I followed your instructions step by step, and my header still isn’t clickable. Any suggestions?

    Reply
    • Puneet December 11, 2012, 10:48 pm

      Hi Dionna! can you please share link to your site?
      Or e-mail me via my contact form. :)

      Reply
  • Jessica Hickok December 17, 2012, 7:05 am

    Hey there Puneet, as I just mentioned on Twitter to you…. thank you, thank you, thank you for your tutorials. You are amazing. I am in the same boat as Dionna above… I, too, followed the instructions, but it is still not clickable. It is located on my site at http://www.southernmissourimls.com – can you help? I just need it to click back to the home/landing page. Thanks.

    Reply
    • Puneet December 17, 2012, 10:49 am

      Hi Jessica!
      Glad that I could help you :)
      I had a look at your site and if I am not wrong, you have removed both site title and site tagline boxes from the header.
      You need to remove ONLY site tagline and leave site title under header box as it is.
      So, now all you need to do is move back site title box under header box and save the template.

      Reply
      • Ashley December 21, 2012, 10:27 pm

        Hi Puneet!

        First of all, thank you so much for this skin. It has made creating my website SO much easier!

        I seem to be having the same problem, however. I did remove both the title and tagline boxes at first (oops!). Then I replaced the site title box under the header box as you suggested, and my logo/header is still unclickable, except where the title would have been. Would you mind taking a look if you get a few minutes please? The website is http://ramseystreetdesigns.com. Thank you so much!

        Reply
      • Ashley December 21, 2012, 10:33 pm

        Nevermind! I added “height: 240px;” and it seems to be working great now. Thank you again!

        Reply
        • Puneet December 22, 2012, 12:25 am

          That’s nice :)

          Reply
  • Anna {Herbivore Triathlete} April 10, 2013, 4:45 am

    Hi there, I followed each step and my logo is still not clickable. Could you please advise?
    http://www.herbivoretriathlete.com

    Thanks!

    Reply
    • Puneet April 11, 2013, 2:12 am

      Hi Anna!
      You can set the width for #site_title a to 890px. :)

      Reply
  • Shuvo April 22, 2013, 4:10 pm

    Really amazing tutorial. Thanks Puneet for your greet tutorial.

    Reply
  • Stephanie May 7, 2013, 8:05 am

    Hi Puneet,

    I would love to figure out how to create a really wide header like the one on this site: http://www.giantant.ca

    Unfortunately, every time I try to do it it does not work. I’ve tried making the header width wider while keeping the content container narrow but when I do that the header aligns left with the container and runs off the page to the right. I’ve tried custom css, readjusting the padding, margins and everything else in almost every existing css package that exists. It can’t be this hard!

    So 1. Why is my header is aligning with the left side of my content column and running off the right side of the screen? And 2. How do I successfully create a full width header and keep a narrow content column?

    Thanks!

    Reply
    • Puneet May 9, 2013, 1:33 am

      Hi Stephanie
      I would have loved to provide detailed instructions but that would turn into a blog post. If you wish, you can e-mail me using my contact form and I can help you set it up. :)

      Reply
  • Manoj June 21, 2013, 4:02 pm

    hi Puneet,

    I have given a hyper link from thesis 2.0 textbox but when clicked it take to 404 page. It is working well from menu, for both I have given same url. Can you help me to solve the problem.

    Reply
    • Puneet June 27, 2013, 10:49 am

      The only possible error could be in your code for creating the link. Please check and make sure that you have written correct HTML.

      Reply

Leave a Comment

Next Post:

Previous Post:

Login

Hello!

Puneet Sahalot I am Puneet, a freelance WordPress developer with over three years of experience. I build websites and blogs using Thesis framework.

I built the first responsive Thesis 2.0 skin and was featured on WMPU.org. When not writing code, I love traveling and clicking photographs. Read more.

Reach me via:

  • e-mail: puneet[at]icustomizethesis[dot]com
  • twitter: psahalot
  • Skype: puneetsahalot
  • Contact Page: Here

I use and recommend

How smart is your Theme?  How good is your support? Check out ThesisTheme for WordPress. Soliloquy - The Best Responsive WordPress Slider Plugin. Period. Gravity Forms Plugin for WordPress