UPDATE: This 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.
Step 2: Upload your new custom header graphic to the “custom/images” directory of your thesis theme installation.
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.
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!
Want to see some examples of thesis headers that I’ve done? Click here!
This post is tagged Thesis, Tutorial, Wordpress Themes
Thank you; this was very helpful. I had it almost working before, but the combination of the Open Hook plugin and your tutorial got me where I wanted to be with it. 🙂
Hi, I have to say that so far your tutorial has been the best! I am no hotmail programmer and find Thesis quite overwhelming.
So I followed what you said here and made the changes in my css file under Open Hook.
Now I seem to have the space right, but my picture does not show. It is really in Custom/images folders… not too sure what is going wrong…
You have some extra characters in your custom.css file, possibly from when you copied and pasted from this page. if you fix those, it should show up correctly. Do it like this:
.custom #header #logo a { display: block; height: 150px; width: 857px; background: url(‘images/UnfuzzBannerV2.jpg’) no-repeat; outline: none; }
Ok, I found a way… thanks for your help!
Where specifically in the css file do I place this code.
Thanks,
Dick
I just put it at the beginning of the file – but it should work wherever you want I believe.
Not sure what I am doing wrong either, but the space is now there, it is clickable and I know my header image is in the custom/images file, but it does not show up, please help I have spent hours working on this. Below is a direct cut and paste from my custom.css file:
/* 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: 120px; width: 990px; background: url(’images/HeaderImage.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; }
same as the above poster – you have some miscellaneous characters in your custom.css file causing it to not work correctly. Emailed you a solution.
Peter,
I must have done the same thing cause I’m getting the same result. I just highlighted the text on your page copied it into notepad and changed the image info.
/* 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/grow_header.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; }
Thanks again,
Dick
Hey, my logo is linkable but the picture does not display.:
/* 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/Logo.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; }
/*
Thanks for any help.
sent you an email to try and help.
Same problem as above. I’ve copied the line from your site, but my header still doesn’t show.
/* 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: 107px; width: 553px; background: url(’images/logo.gif’) 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; }
EDIT: found miscellaneous quotes that were added. Fixed it.
[…] had to add a header graphic to a site using the Thesis the other day. I found this blog post on how to do it and it worked really well. However, there were a few additional tips which helped […]
Hi,
How can we use this, but have the header non clickable?
I hate to do the echo thing, but I’m having the same problem – no image showing up. This is what I put in the css.
/* 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: 108px; width: 950px; background: url(’images/insp2.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; }
I looked at your custom css. You show the header image at this location in your file:
http://www.inspiratus.org/wp-content/themes/Thesis%20151/custom/images/insp2.jpg
but you actually have the file at this location:
http://www.inspiratus.org/wp-content/themes/Thesis%20151/custom/images/custom_images/insp2.jpg
also, you don’t have quotes around it.
Change it to this and it should fix your problem?:
.custom #header #logo a { display: block; height: 108px; width: 950px; background: url(‘images/custom_images/insp2.jpg’) no-repeat; outline: none; }
People who aren’t used to doing this kind of code should be careful about the text editor they use; I haven’t done much coding in years, and I accidentally used TextEdit in Mac OS x, which thoughtfully _curled the quotes_ and broke the code.
There’s a way to force stuff in text edit back to plain text, but I wasn’t thinking.
so, don’t use Word; don’t use textedit unless you’re careful; on the PC I guess you use notepad as a cheap editor, on the mac you can get textwrangler for free.
/* 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: 170px; width: 990px; background: url(’images/custom/images/test.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; }
1. the above is what i did , copying wholesale from the instruction above.
2. this is shown in my host server :
thesis_151
custom
cache
images
minimal
images
lib
admin
classes
css
functions
html
scripts
rotator
Kindly advise how to resolve this problem, many thanks
Chua
I got the same problem as everyone else. What am I doing wrong? Everything works i just got the path messed up somewhere I guess because I have no pic showing
Below is what i put into the Thesis custom styling editor
.custom #header #logo a { display: block; height: 140px; width: 990px; background: url(’images/logo.png’) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header { padding: 0; }
Where am I messing up?
It’s Norm again I believe my problem is I don’t know how to find the path to my image. I am a total beginner. How do i locate the path to my image?
Thank you.
Norm
ok, here’s what i’m seeing:
.custom #header #logo a { display: block; height: 140px; width: 990px; background: url(’images/logo.png’) no-repeat; outline: none; }
it should be:
.custom #header #logo a { display: block; height: 140px; width: 990px; background: url(‘images/logo.png’) no-repeat; outline: none; }
put that in there and see if it works..
Hi there,
I’m experience the same problem as others above: the image does not show.
Any help would be much appreciated.
Here’s my code: [redacted]
Also, I may be way off base, but how does this work with full-width headers and nav bars?
Many, many thanks!
same as above. here’s what i’m seeing:
.custom #header #logo a { display: block; height: 140px; width: 990px; background: url(’images/header.jpg’) no-repeat; outline: none; }
it should be:
.custom #header #logo a { display: block; height: 140px; width: 990px; background: url(‘images/header.jpg’) no-repeat; outline: none; }
Thank you Peter!
How do I prevent the quotes from being curled if all I’m doing is copying and pasting?
Is this a common problem that I should keep an eye out for when I’m inserting code from helpful sites like this?
Again, many thanks!
I’m having the same trouble as everyone else; the space shows up, but with no image. I pasted in the CSS exactly as in the post and modified only the image name. I even tried putting in the absolute path to the image (now reverted back), but no success that way either.
Never mind. I read through some of the comments. I was using ‘ instead of ”
It’s working now.
I am totally confused. I don’t have a folder named “images “in a folder named “custom” fas in the instructions so should I make one?
I ask because there is already a folder in the thesis directory named “custom” and one named ” images”?
So which of the 3 folders should I be using to contain the image I want in the header please?
Thank You.
In looking at your site it doesn’t appear that that you’re using the Thesis wordpress theme? If you aren’t, this tutorial won’t apply to you.
Hi,
I’m having the same problem. My header is now linked, but the image isn’t showing up.
I am using Thesis with OpenHooks and tried it in their customcss.editor. I tried a single straight quote and double straight quotes. I put the image in every folder I could find so it’s definitely up there somewhere. Am not sure what to do at this point. Will you please help? What am I doing wrong?
You are looking at the site that I plan on moving to WordPress.org. It is Obvious from the address that it is a wordpress HOSTED blog in my link.
YES I am using the Thesis theme. I bought and paid for it and am trying to get it the way I want it before I import my blog data as I assume most people would do.. I would not have asked the question if I wasn’t using the program sir. RIF
I was merely pointing out that you didn’t leave a link to the site you were referring to – making it hard for me to take a look at it.
If the site you’re referring to is http://oldschoolmusiclover.com/ then the first thing I”m seeing is that the custom.css file mentioned on that site doesn’t exist as noted in your theme files. Have you activated the custom.css file to be used through the thesis options? If so, have you renamed the folder named something like “custom-sample” to be “custom” so that your customizations will be saved?
If you have done all that, and have placed the background file in the “custom/images” directory, you should see your header file.
@Amy, what is the site that you are referring to? The one linked in your name isn’t showing the thesis theme.
What is causing the curling of the quotes? It looks fine in the Thesis OpenHook custom.css Editor, but when I view the css file in an text editor, that’s where I catch the problem.
What good is the OpenHook editor, if it does this?
I have done everything as instructed above but my header image won’t show…What could be wrong? Please Help! Thank you
Can’t help you Florentina if you don’t leave me a URL for your site that I can look at?
Thanks for responding so fast. As you can see I am not very savvy in this area 🙂
here’s my website : http://www.ciaoflorentina.com
when i go to your site, there is no custom.css file where your site is referencing it:
http://ciaoflorentina.com/wp-content/themes/thesis_151/custom/custom.css
have you actually entered the info above in your custom.css – because i’m not seeing it?
I believe I did. I hope it was in the right place…
BTW, I really, really appreciate your help. Thank you!
how do i make my site reference the custom.css file? or what do i need to do?
you shouldn’t have to make a reference to the file, it should be automatic. you just have to enable it in your thesis options, rename the “custom-sample” folder to just “custom” and then put in your custom css in your css file.
I found someone to do it for me b/c it’s all just going over my head.
Thank you so much for your help, You are great!!! Many thanks!!!!
Peter,
You rock!! This article has saved me. 8 hours searching for just the right step by step, visual friendly instructions to help me understand exactly the code needed and where to insert the code to publish my custom header in Thesis theme.
Thank you again and I look forward to more!
Yours in gratitude,
Rich Jaeger
eGlobal Entrepreneurs, Founder and CEO
Hello there.
Same problem goes for me. I’ve been reluctant to ask as it seems pretty straight forward, but I can’t get my image to appear either. Tried all the fixes above, but I just can’t see what the problem is.
Any thoughts?
Thanks!
looks like you’ve got some extra hashes in there:
\’http://www.thesaucycoq.com/wp-content/themes/thesis_151/thesis_151/custom/images/Rooster megaphone Banner.jpg\
should be:
‘http://www.thesaucycoq.com/wp-content/themes/thesis_151/thesis_151/custom/images/Rooster megaphone Banner.jpg’
Thanks for getting back to me Peter.
But, I don’t see what you see. When looking at my custom.css and editing the header image, I have:
.custom #header #logo a { display: block; height: 224px; width: 941px; background: url(‘http://www.thesaucycoq.com/wp-content/themes/thesis_151/thesis_151/custom/images/Rooster megaphone Banner.jpg’) no-repeat; outline: none; }
Are you seeing this in the source code?
Ahhhh, I just tried using IE and my banner image does in fact appear, so the script is correct.
I use Google Chrome, and cannot see the banner in Chrome. Is this a common problem?
Thanks!
yes, your source code shows extra slashes in there. You may need to download the file via ftp, modify it, save it and reupload it. That should fix it I think.
[…] How To Add A Clickable Header Image To Your Thesis WordPress Theme – Logos for Websites (tags: thesis-theme howto) […]
Great info here, thanks. I’m having trouble too. I have two images in the header, two different links. I had a freelancer put up the previous images, now i’m trying to replace one of them. I have successfully removed the image I need to replace, but can’t seem to get the new image to show…
[…] I’ve created a clickable customer banner today with the help of the Thesis Open Hook Plugin and a very easy tutorial over at Logos for Websites. […]
Hi,
Thanks for this help. Marvellous. I have the clickable link header up on my site. However I don’t know how to edit the link that is followed when it is clicked on. From your comment included below, it seems that the link is linked to the site’s title and that this is controlled elsewhere in the Theme. Please could you say where.
/* This line sets up our clickable background image based on the site title’s link */
Carey
Great tutorial! My logo is not showing up in IE or firefox. Any thoughts?
Looks like you figured it out because it’s showing for me in both now?
[…] The following brilliant information and css code comes from Logos for Websites: […]
worked like a charm, thanks for taking the time to write this up!
How can I center the logo? I can’t figure out where to put my tags…
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; }
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.
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
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; }
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.
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?
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.
THANK YOU! You can tell I’m new at this…
You’re a genius 🙂
Thank you! I’m currently in the middle of testing a Thesis custom hook with flash and this really helped out!
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
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!
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!
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!
Nevermind. I figured it out. Google is my best friend. 🙂
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.
Another helpful post man.
I can’t but wait this tips on my thesis theme.
hope u will provide post more on this issue.
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
[…] Add Custom Logo / Header to Homepage […]
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?
This is so great! I love it!!
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.
Excellent post. I combined your information with that from DoubleMule dot com and got exactly what I was looking for.
Cheers,
Karl A. Krogmann
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! 🙂
You’re welcome. 🙂
[…] 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 […]
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;}
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
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
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
?
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!
Thank you very much. This worked wonderfully. I sincerely appreciate your easy-to-follow description.
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
Worked the trick. Great job. Thanks
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.
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
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!