How To Add A Clickable Header Image To Your Thesis WordPress Theme


Thesis Theme for WordPress:  Options Galore and a Helpful Support Coummunity
May 13th 2009
91 Comments
respond
trackback

UPDATEThis tutorial is no longer necessary as Thesis Version 1.8 with uploadable header and favicon graphics has been released!.

I’ve been doing a lot of Thesis Theme headers for my clients lately.  Once I send them a completed product,  I’ve found that most people aren’t quite sure how to replace the default header text with their new header logo.

To help them out I put together a quick 3 step tutorial on how to add your new header to your thesis website.   *Thanks to Kingdom Geek for his tutorial on custom headers which this is based on.

3 Steps To Add Your Custom Header Graphic

Step 1: Make sure the “Show site name in header” option is checked in the Thesis options screen.

thesis_options_show_site_name

Step 2: Upload your new custom header graphic to the “custom/images” directory of your thesis theme installation.

thesis_wp_custom_header

Step 3: Add a few simple lines of CSS to your custom.css file:

If you’re using the Thesis OpenHook plugin (recommended), you can just click on the “Appearance/Thesis Custom Styling” link in your wordpress admin to edit your custom.css file.  On the page that comes up, the first editable text box will be your custom.css file. It is labeled “Custom Stylesheet” (see below).  If you don’t have the plugin just navigate to your custom folder and edit the the custom.css file in the text editor of your choice.

thesis_wp_edit_custom_css

To insert your new header, just copy and paste the following into your custom.css file, making sure to change the height, width, and url to match your own values:

/* This line sets up our clickable background image based on the site title's link */
/* Adjust the height & width below to reflect the actual size of your image */
/* Change the filename of your image to reflect the actual header's file name */
.custom #header #logo a { display: block; height: 140px; width: 990px; background: url('images/YOUR_HEADER_NAME_HERE.jpg') no-repeat; outline: none; }

/* This line gets rid of the site title & tagline by casting them out to the far left */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

/* This line collapses the vertical space of the tagline so that there isn’t unnecessary white space after the header image */
.custom #header #tagline { height: 0; }

/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }

That’s it! You should now have your new custom header appearing at the top of your page!

custom_header_thesis

Want to see some examples of thesis headers that I’ve done? Click here!


This post is tagged , ,

91 Responses

  1. Andrea says:

    Great tutorial! My logo is not showing up in IE or firefox. Any thoughts?

  2. Peter says:

    Looks like you figured it out because it’s showing for me in both now?

  3. [...] The following brilliant information and css code comes from Logos for Websites: [...]

  4. erfon says:

    worked like a charm, thanks for taking the time to write this up!

  5. Kip says:

    How can I center the logo? I can’t figure out where to put my tags…

  6. Peter says:

    You could try by adding “center” to the header inclusion line.. like this:

    .custom #header #logo a { display: block; height: 140px; width: 990px; background: url(‘images/YOUR_HEADER_NAME_HERE.jpg’) center top no-repeat; outline: none; }

  7. Billy says:

    The tutorial is very helpful, I have the thesis theme and absolutely enjoy it. Thanks for the help to put together a better looking website.

  8. I’ve followed the steps but now the header area is blank (although it still redirects to the home page when I click inside it). Can anyone suggest what I may have done wrong?
    Thanks

  9. this is the code I have used:

    /* This line sets up our clickable background image based on the site title’s link */
    /* Adjust the height & width below to reflect the actual size of your image */
    /* Change the filename of your image to reflect the actual header’s file name */
    .custom #header #logo a { display: block; height: 144px; width: 792px; background: url(‘images/gasheader_text_large.jpg’) no-repeat; outline: none; }

    /* This line gets rid of the site title & tagline by casting them out to the far left */
    .custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

    /* This line collapses the vertical space of the tagline so that there isn’t unnecessary white space after the header image */
    .custom #header #tagline { height: 0; }

    /* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
    .custom #header { padding: 0; }

  10. Peter says:

    In checking your site, where the image should be, it’s coming up with a 404 error – in other words – you haven’t uploaded the graphic. It should be here:

    http://www.greenapplesorbet.com/wp-content/themes/thesis_16/custom/images/gasheader_text_large.jpg

    But if you go there it hasn’t been uploaded yet. Once you do upload it to that directory it should no longer be a blank.

  11. Thanks for replying so quickly Peter. I’m looking at my cPanel File Manager and the file is definitely there (type: image/x-generic; perms: 0644). Is there something I need to do to activate it?

  12. Peter says:

    the permissions should be correct.. are you sure you’ve placed it in the correct images directory?

    http://www.greenapplesorbet.com/wp-content/themes/thesis_16/custom/images/gasheader_text_large.jpg

    I’m still not seeing it?

    oops. i just realized. the graphic you have uploaded is named differently than what you have in your CSS file. The file is actually named:

    http://www.greenapplesorbet.com/wp-content/themes/thesis_16/custom/images/gasheader_text_larger.jpg

    you’ll need to either change the name of the file, or change the CSS file.

  13. THANK YOU! You can tell I’m new at this…
    You’re a genius :)

  14. Justin says:

    Thank you! I’m currently in the middle of testing a Thesis custom hook with flash and this really helped out!

  15. I put the code in for my header and it shows up in IE but not in Firefox or Chrome. Any ideas why?

    Thanks,
    Jaden

  16. Angelique says:

    Helpful hint to people who wonder why their images aren’t appearing: Be sure that you enter the EXACT name of your image. My image is called “Header.png” with a capital “H.” I was entering it into the CSS code as “header.png” with a lower-case “h” and my image was not appearing. When I realized my mistake and fixed it, bingo! Header!

  17. Joshua Chase says:

    Thanks for the tutorial, this helped me out a lot, and I found out about the Thesis OpenHook plugin which I didn’t know about! Great tutorial!

  18. Peter: Great tute! Can I change the color of my background in the header area? I’d like it to to be #334F60 so it blends with my .png image. Thanks very much!

  19. Nevermind. I figured it out. Google is my best friend. :-)

  20. deborah says:

    Thank you. I spent far too long reading bad directions on how to get this to work. Your directions point out that one needs to check some boxes on the thesis options tab. I am enormously grateful for these *clear* instruction. I’ll be back to your site to learn more.

  21. Another helpful post man.

    I can’t but wait this tips on my thesis theme.

    hope u will provide post more on this issue.

  22. Dave says:

    Hi thanks for your work. After using your code for a bit, I found this code
    /* Adding a Custom Logo Header */
    .custom #header { border-bottom:none;
    height:125px;
    padding-top:0;
    padding-bottom:0;
    background:url(images/yourimagename.png)
    right no-repeat; }

    .custom #header #logo { display:none; }

    .custom #header #tagline { display:none; }

    Which seems to do the same thing only it just doesn’t display the tagline and logo, rather than kicking them to the side.

    I’m having some trouble with either code, and that is figuring out how to add alt text to the image.

    Any thoughts… both on how to add alt text, and on whether the code above is basically the same or is it missing something import… the code above seems to render the image the same for whatever that’s worth.

    Thanks again
    Dave

  23. [...] Add Custom Logo / Header to Homepage [...]

  24. Is there any way to get Thesis to take a larger image and have the browser scale it down to fit in say 950×134? The website my user name in this post links to has a banner I made. However, when you press CTRL + to enlarge the text & website in Firefox, the banner starts to get pixelated. Is there any way to make it work in reverse? Have a larger banner picture shrunk down for the normal display-size, then go back to 1:1 as you enlarge?

  25. Melissa says:

    This is so great! I love it!!

  26. SafariDave says:

    I can’t seem to find this section to install it.
    Step 2: Upload your new custom header graphic to the “custom/images” directory of your thesis theme installation.

  27. Excellent post. I combined your information with that from DoubleMule dot com and got exactly what I was looking for.
    Cheers,

    Karl A. Krogmann

  28. Anonymous says:

    After trying about a dozen codes from different sites and forums and were on the break of destroying my pc, I was surprised to see a post that helped me customizing the header (yes it’s this one).

    Just wanted to say Thank You! :)

  29. Peter says:

    You’re welcome. :)

  30. [...] give credit to the blog Logos for Websites for enabling me the skills to accomplish this task. I will borrow their ideas to summarise what I [...]

  31. Julie says:

    I keep coming across all these great blogs since I changed over to Thesis… anyhow, I was wonder if you know if a way to keep the padding on the blog EXCEPT the header? For example, on my blog, I’d like some padding around the posts, etc. but would like my header to butt up against the inner frame, if that makes sense…. Is this even possible?

    here is my custom header in custom.css

    .custom #header { background: #fff; padding: 0em; border: 0em; margin: 0em;}

    .custom #header #logo a {
    display:block;
    height:200px;
    background:url(‘images/dreamonwith_917.png’) 50% 50% no-repeat;
    outline:none; color: #000000; text-indent: -9999px; padding: 0em; border: 0em; margin-left:auto; margin-right:auto;}

    .custom #header #tagline {display:none;}

  32. Kent Eimers says:

    Hi Peter.

    I am having the exact same problem mentioned by Jaden, but did not see a reply to his post.

    “Jaden Daniels says:
    January 30, 2010 at 9:01 am
    I put the code in for my header and it shows up in IE but not in Firefox or Chrome. Any ideas why?

    Thanks,
    Jaden”

    Any thoughts or suggestions? Thanks in advance for your help.

    Kent Eimers

  33. I am SO Thankful to you for sharing this information! And your website is a great find too.
    So your post was a double gift for me.

    I was able to customize my blog header… even though there is little to no info in the DIY help section. The only thing I can’t figure out is how to create some space between the top and the header bar.

    As for your graphics. Your prices are incredible and since I really do not want to get involved on the graphics end, I hope that I can send some business your way.

    Thanks a Million… no… A Billion!
    Cynthia K. Seymour

  34. Nadia says:

    In thesis 1.7 the screen shot doesn’t look like that. Under open hooks i do not see anything that says custom stylesheet. It starts of as WP Head, before html, after html, before header, after header, header

    ?

  35. Peter says:

    In Thesis 1.7 and newer openhooks no longer has that custom stylesheet information. You can now find it under “thesis/custom file editor”. In addition once 1.8 Thesis comes out you’ll be able to upload the header graphic directly in the thesis admin panel. Stay tuned!

    Thesis Version 1.8 with uploadable header and favicon graphics has been released!

  36. Ryan says:

    Thank you very much. This worked wonderfully. I sincerely appreciate your easy-to-follow description.

  37. Will Quick says:

    Thank you SO much! I’d been trying this for hours, to no avail, and now it’s works… YES!

    You have saved my lungs from more stress related smoking and saved my liver from more stress related drinking.

    You are a bloody wonderful man!

    Will

  38. deepsee says:

    Worked the trick. Great job. Thanks

  39. SonDan says:

    This is a nice addition to Thesis but how can I get the logo on the LEFT HAND SIDE of the header please, keeping the Blog name and description flush to the right?!

    Thanks for reading.

  40. Milind says:

    I want to retain the header & tagline, plus add the graphic above/below the header. I tried but the header & tagline float on the image. Could you please help? Thanks

  41. Mark H says:

    Thanks Peter,

    This code was very useful for one of my websites! I’m glad that you explain the codes as you go along. I’m finding there’s always something to learn. A great reference for sure!

Leave a Reply

Categories