How to upload header image in Thesis 2.0

With the new Thesis 2.0 in action, there are lot of unanswered questions. One of the most basic features that everyone liked in Thesis 1.x is Header Image Uploader.

Adding a header image in Thesis 2.0 is not the same as it used to be. Not talking much, here are the steps for adding Header Image in Thesis 2.0

Adding Header Image in Thesis 2.0

First of all make sure that you have installed Thesis 2.0 correctly. Else, you will see a blank white page on your site.

Step 1:

Login to WordPress admin and go to Thesis Admin Options page.

thesis-admin

Step 2:

Click the Skins tab and go to Skin Editor

skin-editor-thesis2

Step 3:

Step 2 will lead you to brand new Thesis Skin Editor page and open Thesis Canvas in a pop-up window. Thesis canvas is simply a preview of how your site looks with all the changes you make in Thesis Skin Editor.

thesis-2-skin-editor-preview

Thesis Skin Editor

Step 4:

Click the Images tab in Skin Editor and click Add Image button.

add-image-thesis-2

Step 5:

After the image upload is complete, you will see it in the list of images on the same page. From there, simply copy the relative image path (highlighted in blue in the image below).

image-path-thesis-2

Step 6:

Now, click the CSS tab on top and then on the CSS page in Packages column, click on Header

header-package-thesis-2

Step 7:

After you click “Header” package a pop-up box will appear. In the box, click on Options tab. Now, click the small arrow that appears next to Background and you will see a blank field for Background Image. Paste the relative image path that we copied in Step 6 in this field. Finally, click Save button. This will save the changes you made to Header package.

header-image-css

Step 8:

Now you need to click Save and Compile CSS button so that the changes you made to Header package are carried to over to the CSS file.

save-css-thesis-2

Step 9:

There is no further step. Check out your site and you will see your header image in place! Just like I have an ugly header image on my test site here.

Check out mobile responsive Thesis 2.0 Skins

Get free e-mail updates

{ 53 comments… add one }

  • Aha October 3, 2012, 12:17 pm

    Thanks for this great tutorial. I’ve a question, in the past Thesis on the Header Image Uploader there is a suggestion for image width. “the optimal header image width is … pixels”. So, I make an image based on this width. How to know the optimal header image width in Thesis 2.0? Thanks again.

    Reply
    • Puneet October 3, 2012, 12:21 pm

      You will to go to CSS tab and then in the list of packages look for Container, click it, a pop-up box will appear. In the pop-up, click options tab and there you can check the width of your site. If you haven’t made any specific padding / margin / width changes then the value for Header width will be the same as for the Container.

      Reply
  • Pam October 3, 2012, 7:10 pm

    Great tutorial Puneet. I got stuck at step 6 though. Under the CSS Reference column, I don’t have an images/header.jpg

    How do I get my header/logo image to show up there? Or is header and logo something different?

    Thanks,
    Pam

    Reply
    • Puneet October 3, 2012, 9:58 pm

      Hi Pam!

      You will need to upload a file first, as shown in Step 5 and the file which you have uploaded will be visible in the list.
      Since, my file’s name was header.jpg it shows the same in the list. Your file’s name might be different.

      Reply
      • Pam October 7, 2012, 1:16 am

        Thanks Puneet. I did that, but our logo is HUGE! How do I re-size it to fit the header area? Do I resize it to be 959 width and 100 height?

        Pam

        Reply
        • Puneet October 7, 2012, 3:00 am

          Hi Pam, you will need to resize your header image. You can ask your designer to that for you. :)

          Reply
  • Rhino October 5, 2012, 2:08 am

    Nice tutorial. How do you set the height of the header area?

    Reply
    • Puneet October 5, 2012, 6:31 pm

      In the additional CSS for &header package. You can add

      #header {height:100px;} 
      Reply
      • Lidi January 28, 2013, 3:17 am

        Excellent Tutorial!!! The only thing that was hard was figuring out how to set the height of the header area. This last comment worked perfectly!

        Reply
  • Julia {The Roasted Root} October 6, 2012, 3:47 am

    Hi there! Thanks for the header help! I have header sizing issues like those commenters above me, which I think should be easy to figure out, but what I’m having trouble with is my site title and tag line show up on top of my header image…how do I get rid of the typed out title and tag line so that only my header image shows? Thanks a bunch!

    Reply
  • Mimi October 6, 2012, 4:08 am

    If this makes Thesis easier, I don’t see it. Before uploading a header was done in a couple of steps, and styling it was really easy. Now we have to jumps through a bunch of hoops to get almost nothing done. I think I would rather type a couple of lines of code than trying to memorize all the little different things we have to add and coordinate.

    Reply
  • Mimi October 6, 2012, 4:16 am

    Sorry I should have added that your tutorial is very good and it works well. I hope you will create many more. Thank you. I expect I will warm up to the new thesis, but right now it is frustrating at best.

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

      Hi Mimi!

      I can understand your point. But, once you get used to the new version, you will realize that it’s much more powerful tool and you can do absolutely anything with your site’s design.

      Reply
  • Dane October 6, 2012, 5:54 am

    Thanks so much. Worked perfect and I really appreciate the help. Stumbling through the somewhat newb-hostile new layout. Will be watching your site from here on out. Cheers.

    Reply
  • Mike Lewinski October 14, 2012, 3:02 am

    Julia, you can remove the site title and tagline by clicking the HTML link in the skin editor, then expand the section called “Header” by clicking the arrow on the right side. Then you can shift-drag those two elements out of the Header to the bar on the right where it tells you to.

    Reply
    • Mike Lewinski October 14, 2012, 3:03 am

      And don’t forget to “Save Template” when you’re done.

      Reply
  • chris October 18, 2012, 2:30 pm

    At last a guy who understands how an average person thinks. Getting to grips with Thesis 2 is a nigtmare.

    Reply
    • Puneet October 18, 2012, 2:49 pm

      Thanks Chris!
      I am sure things will be better once the documentation and user guide are released.

      Reply
  • Paul Jacob October 19, 2012, 9:13 pm

    Thanks puneet, excellent tut. The copy in the header I uploaded is centered, but the image displayed in thesis is off center to the left. Any idea why?
    http://i46.tinypic.com/23h7uph.png

    Reply
    • Puneet October 20, 2012, 2:09 pm

      Hi Paul, please check that the width of header image is same as the width of your site.

      Reply
      • Paul Jacob October 20, 2012, 9:27 pm

        Thank you Puneet, that fixed the centering problem. Appreciate your help.

        Reply
  • Sybille October 20, 2012, 5:15 am

    Hi Puneet
    I have just saved the “Adding header image” tutorial.

    What happened to “Step 4″ – there isn’t one! did you accidentally jump from step 3 to step 5, or is there a step missing in the tutorial?

    Reply
    • Puneet October 20, 2012, 2:08 pm

      Hi Sybille!

      So sorry. Step 5 is actually Step 4. This was a typo on my side. Fixed it. And thank you for pointing it out :)

      Reply
  • Leo October 23, 2012, 1:07 pm

    Hi Puneet, I’ve been playing around with this and my header image shows up fine in the preview canvas but not on the live site. Do any special permissions need to be set for it to display?

    Reply
  • Jay Phelps October 27, 2012, 2:09 am

    Thanks for the info Puneet — this was very helpful!

    Reply
  • Dr. Lawrence November 4, 2012, 7:09 pm

    How to make the header image clickable after putting it up?

    Thanks for the Great Tutorial!

    Reply
    • Puneet November 4, 2012, 7:28 pm

      Here is the next tutorial for that.

      Reply
      • Dan December 6, 2012, 1:49 am

        I have a similar issue to Julia. My title and tag are overlapping with the header image. But I don’t want to lose my title and tag. I want to have my title and tag above the header image and centered. Thanks.

        Reply
        • Puneet December 6, 2012, 7:56 pm

          Hi Dan!

          Moving Site Title and Tagline will need some additional CSS. Will be nice if you can share a link to your site or drop me an e-mail via my contact form.

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

    I have a similar problem. I want to put my header image on the left side and put my Site Title and Tagline above the header image.

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

      Hi Will!
      Can you please share a link to your site? Will be easier for me to help you.

      Reply
  • Elizabeth January 19, 2013, 12:15 am

    I loved your tutorial for uploading the header image – worked great! Thanks for that! I am unable to drag and drop from the main box in the skin editor – I can rearrange within the box but cannot remove anything to the widgets area or from the widgets area to that main home page box. I’ve tried this on safari, firefox and google chrome, uninstalled and reinstalled Java, and disabled every plugin I can find – still no difference. Any advice? Thanks!

    Reply
    • Puneet January 23, 2013, 4:14 pm

      Hi Elizabeth!
      Are you referring WordPress widgets page? or Widgets box in Thesis skin editor?

      Reply
  • JoeTaxpayer January 19, 2013, 9:13 am

    On my site Rothmania.net, I’m still at Thesis 1.85, but I’ve been tinkering with 2.0 and appreciate your tutorial here. What you show on a page, others have taken 20 minutes to try to show in a video. You’ve done a great job.

    You can see at my site, an advertisement will come up over the header, i.e. inserted right in front, not above or below. This was done with custom code through These Custom File Editor.
    Any thoughts how to do this exact thing in Thesis 2.0.3?

    Reply
    • Puneet January 23, 2013, 4:13 pm

      Hi Joe!
      Glad to know that this tutorial proved helpful.
      You can create a “Text Box” put your ad code in the text box and move this text box inside “Header Box”.
      After that you will need to use some CSS package to style and align it properly.

      Reply
      • JoeTaxpayer January 23, 2013, 8:17 pm

        Progressing. I used a to push it right. Can you give me a hint how to shift it a bit up/left from the edge?

        Reply
  • john February 9, 2013, 10:40 am

    i followed your directions, but the header logo did not appear…am i stupid?

    Reply
    • Puneet February 9, 2013, 8:05 pm

      Hi John!
      You might like to add #header {height:height-of-header-image-in-px;} to additional CSS section. Or drop a link to your site and I will check it.

      Reply
  • elle | nutritionella February 20, 2013, 6:12 am

    Appreciate your tutorial! :) SLOWLY starting to get the hang of the new Thesis… I have a feeling some day I will appreciate everything it can do.

    Reply
  • Ken April 25, 2013, 10:38 am

    Hi Puneet,
    thanks for this tutorial. Now my problem is I have a header, but it still shows the Title and Tagline on top of the header, and that looks quite terrible. How can I remove title & tagline?

    Thanks,
    Ken

    Reply
    • Puneet April 26, 2013, 12:00 am

      Hi Ken!

      Please add the following code to your skin’s “Custom CSS” section:
      #site_title, #site_description {display:none;}
      #header {height:110px;}

      Reply
      • Ken April 26, 2013, 7:33 am

        Hi Puneet :-)
        thanks for the fast response! The title is gone now, now just the tagline still shows. Looks a lot cleaner already, but is there a way to remove the tagline too?
        Ken

        Reply
  • Rachel May 15, 2013, 12:50 am

    Hi! I have my header, but now it is off center. I am a newbie. Can you tell me how to change the width of my site, or is there an easier/better way?

    Reply
    • Puneet May 15, 2013, 7:29 am

      Hi Rachel! Please use the following code to center align it:

      Reply
  • Christina May 20, 2013, 8:24 am

    Hi Puneet

    I am a newbie and have downloaded this header customization box. I just don’t know what to do with it, step by step.
    1. I drag it into my HTML
    2. I add a main header image under ‘Appearance’ – ‘Header’
    3. I add other images under ‘Header’ on the specific pages
    but it doesn’t seem to work. Should I have added something into the CSS for it to work? I’m very confused. I can’t send you a url as I’m behind a ‘coming soon’ page, but any advice would be great!

    Reply
    • Puneet May 20, 2013, 12:21 pm

      Hi Christina!
      You are uploading the header image in wrong place. You don’t need to upload it under “Appearance – Header” section. Please follow the steps mentioned in the post.

      Reply
  • Christina Hanna May 20, 2013, 12:31 pm

    Hi sgain Puneet. Im very sorry but my original question wasn’t clear. I’ve tried to upload this header box http://studio.kristarella.com/product/header-image-box/ which is a box that lets you change header images on different pages. The steps I mentioned above were in attempting to have a different hesder for every page.

    Reply
    • Puneet May 20, 2013, 12:35 pm

      No worries. I have used the Header Image box by Kristarella. So, after you upload and activate the box you need to go to Thesis Skin Editor and in the right column, you will see an option Add Box there in the dropdown you can see Header Image box. Add it to the skin HTML section. Now, whenever you upload a new image in this Header Image section from the WP Post Editor you will see it on the page/post.
      If you need assistance, please feel free to reach me via my Contact Form.

      Reply
  • Christina May 20, 2013, 12:45 pm

    Thanks Puneet. I will have a go per your instructions and thanks for the kind offer of help!

    Reply
  • Jim June 4, 2013, 11:57 pm

    Great simple tutorial. Got it working in seconds. Thanks!

    Reply
  • Mel June 19, 2013, 9:35 am

    I have the header uploaded but I need to center it better. Any suggestions.

    Thanks

    Reply

Leave a Comment

Next Post:

Previous Post:

Login

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