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
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.