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