One new Thesis User mailed me and asked how to add clickable header banner into Thesis WordPress theme. For those who are not aware of Thesis theme, they should read my review on Thesis WordPress theme.
Adding Clickable header is quite easy in thesis wordpress theme. For those who are not aware of thesis customization, thesis customization is primarily controlled by custom.css and custom_functions.php and you can use thesis theme and design control panel to design your Thesis Theme.
To add a banner, you need to upload your banner using any free ftp clientto your custom/images folder into Thesis wordpress theme.
You also need to note the size (height and width ) of your banner. Now add these codes into your custom.css and replace
- Image name
- Height and Width
.custom #header #logo a { display: block; height: 80px; width: 411px; background: url(images/logo.gif) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; } .custom #header { padding: 0; }
.custom #header {border-bottom:none;}
In the above code note the images/logo.gif part. You need to replace your logo.gif part with your banner name. And also the height and width size. Providing wrong height and width part may not let your banner appear.
I’m sure this will help many those who have Thesis theme installed. If you looking for high end thesis theme customization.
You should look at my thesis customization service page. For other thesis customization tips, browse thesis customization category.
Update: Thesis 1.8 is released which has inbuilt header banner uploader option.
Article by Harsh Agrawal
Harsh has written 949 articles.
If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.
→ 
→
{ 17 comments… read them below or add one }
Nice information bro, I am not using wordpress theme, well it will help for wordpress users.
I need this for four of my blogs, I just spoke with my one designer earlier today and he had tried to get this done but couldn’t figure it out.
Hopefully this will work on our applications, thank you
Great tips mate! But sadly I don’t know how to really use Thesis.
I think looking your site there are lots of information more than this that you can share with us about thesis customization. Where can I get the social buttons like you put below each post?
Thanks for sharing the tip, It is really helpful for me.
Thank you for the tip on further customizing Thesis. I recently purchased Thesis–and to be honest, I’m extremely frustrated with it. I can’t seem to get a grasp on the hooks (although, based on the few tutorials I’ve found–they’re supposedly easy to understand once you finally “get it”.)
My question is in regards to the clickable header *and* nav bar–as I see you have in your example image above. Is there a way to great my own nav bar (as an image) as well (and replace it with the Thesis current one?–obviously it would have to be clickable.)
Second, I would like to have my nav bar and header all full-width. I followed along with http://www.kristarella.com‘s tutorials–but somehow I ended up with two headers and nav bars and my header image wouldn’t show up.
I’ve tried everything imaginable (including resetting Thesis)–and I still seem to be having issues. Here is the site I’m using as a test site. http://www.bustedbrilliance.com. I deleted all code that I previously had in my header (I think) to get it back to how it was.
I would appreciate your input. It seems there are only a few Thesis help forums around–and I’m happy to have found yours.
Thank You!
Lindsay
Hey Lindsay
The kind of customization which you trying to achieve can be done by CSS and need custom coding. Well I wish I can directly help you here but the coding all this will take time. Though you are welcome to take my professional services for thesis customization
http://www.shoutmeloud.com/services
Regards
Harsh
Thanks for the tutorial. The part about making my header clickable seems easy enough, but where do I insert code to make the click, well, click?
Example, if I want a click on my header to take the user to my products page
- “http://www.beatschindler.com/boots/myproducts” – what code would I insert where?
Thanks a bunch!
Beat
Thanks! Found a few post for this and yours was the only one that worked!!
Perfect! There are a lot of other “solutions” out there. Yours worked perfectly and quickly! Thanks so much!
Actually, I tried this theme on some of my site and the result is fantastic! You can actually do whatever you want in this theme. You can customize it in every way you can. You can simply be able to understand all this by start using “thesis theme” and you’ll see what I mean. Very informative post above!
Tricia I will say it’s one of my best investment after hosting. Getting this theme made my life so easy and at this moment I’m using it on most of my blogs.
When I tried this, my original header just disappeared and the new logo/banner was not in its place. Am I missing a step not shown here? I did exactly as you said…
Thanks for this trick
I see there was no reply to “Beat Schindler” about how to actually make
the image go to any page you want, like making it a banner ad.
Is there any answer for that one?
Thnx
I have a question. Do you know how do I add a Second Header section just below the first header section of Thesis WP theme so that I can display (non-clickable) images in that header section.
Hey, thanks for the clear information! I’m making the header of my blog clickable now.