My last two free Thesis Skins (Sharp and Terracotta) have included an area in the header for adding banner ads, social media icons, and other content. Here’s a quick video tutorial on how you can add a header widget to your Thesis Themed site that will allow you to add content to your header directly from the widgets panel.
The code used in the video can be found below the video and can be copied and pasted into your custom_functions.php and custom.css files.
Code for your custom_functions.php file
Text File including the following code for copying and pasting
This code builds a 3rd widget titled HeaderAd to your widgets panel and ‘hooks’ it into the header. You’ll need to add the code below to your custom.css file to position the new widget properly.
Code for your custom.css file
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:0px; left:477px; width:468px; }
You’ll most likely need to adjust the left and top attributes to appropriately position the banner based on your column and width settings. In the tutorial, I used the page framework and the two column layout with a main column with of 600px and a sidebar column width of 300px.
I also used a 468×60 banner in the tutorial so if your using banners of different sizes or multiple social media icons, the width attribute may also need to be adjusted.
Hope you enjoy the tutorial and please feel free to leave a comment with any questions or feedback you may have!
{ 31 comments… read them below or add one }
Very cool tutorial, I’ve been looking for a way to do this. I have to try it and see if it works, I’d like to be able to add some widgets to the header section on some of my sites.
Oscar – Thanks for the feedback. Give it a go and let me know if you need any help along the way!
Would it be possible to make this RSS sign up form go in a header widget like th one you have: http://www.agentpress.com/demo/ . Also, do you do any freelance work…I’m trying to make a kick ass site using Real Estate site using Thesis
?
Email me if you are interested??
Yeah, you’d just need to copy the RSS code into a text widget. Some additional CSS styling might be needed to get the right look, but the header widget can be used to put all types of content up in the header area.
I do some freelance work on occasion but I’m currently tied up with several other projects so I’m not taking on any design work for the time being. Thanks for asking though
You might want to check out the classified ads over at the Thesis forums to get hooked up with a designer specializing in Thesis.
Hi… just started with your cool skin… terracotta. A couple of quick questions… the frame on my photos show up white and not with the cool border on your demo. How do I fix this And is the drop cap feature something I have to code in each post?
Thank you.
Hey Dennis – Adding frames to your photos in Thesis requires you to add just a bit of html to your image code. Check out the How to Style Images in Blog Posts page from the Thesis User’s Guide for more info.
As far as I know, you do have to manually code in each post. The Publish Like a Pro with These Styling Tips page from the User’s Guide provides some more details.
Thanks for giving my skin a try! Terracotta looks nice on your site!
Thanks for the Tutorial. I had been looking for a way to do this.
Chris,
Thanks for that! It worked perfectly!
Bob
I have added the custom functions and css. I have now the side bar box in the header. Went to the widgets area and added a text box to the headerad and I can get it to appear. I am running a two column. Should it be on 3?
Thanks for the tutorial! I’m enjoying working with thesis and your website has helped a bunch.
*Confused*
if i want to place 728×90 which part i must change?
Just the css attributes for the header widgets, specifically these:
top: 0px; left: 477px; width: 468px;thanks for the widgetized header…!
Thanks! Very Useful
Thanks for this tutorial. It’s just what I needed to begin the re-vital of a much neglected blog. It worked absolutely flawlessly!
Peace and Love to You!
Thanks for the tutorial…it was very easy to follow (and I’m a newbie). Quick question….I added a text widget in the header and added code to make the text clickable, but it doesn’t allow you to click on it. The link works if I put it in a page or post but not in the header….any thoughts?
Sandra
Just realized that I missed copying the first line of css code….everything works great now!
Thanks so much,
Sandra
Glad you figured it out!
Hi Chris,
the sharp skin is awesome and your tutorials easy to follow!
Thanks a lot for your great work and sharing it with us.
I’m starting a new blog and I chose your sharp skin. I would like to ask you, how you made the | line in the nav. menu and also how to make the header logo not bolded? I’ve been looking for it in custom.css and layout file as well, making some changes but no result.
Thanks a lot for your time
Justyna
Hi, Chris.
Is it possible that, because I’ve already inserted a custom header, something in *this* code conflicts with that, and that’s the reason I can’t see my widgetized header? Or is there an iframe issue? I’ve placed my banner code into the widget, but nothing’s showing up.
Oh! Wait! I just realized that I’m working with a full-page layout? Is *that* the problem?
Thanks this was a great help to me
I’m trying to use this widget (thank you VERY much) to place two items in the top banner. A clickable image with a search box under it horizontally. Is that possible? Right now they are both aligning on top of each other in the same space!
Thanks in advance.
http://www.erickortzmd.com
Chris,
I’m using your widget…but it seems you can only really apply one item to this area? I need a clickable logo and a search box and one is overlaying the other. Any ideas?
http://www.erickortzmd.com/
nice written . well informative article. i saw it operation on theappsplanet site too . nice written info man. thanks for posting.
This is fabulous. Thank you!
Does this work with Thesis 1.7? I add the code as specified and nothing shows up in my widgets or on my homepage.
Thanks!
Very much help full lot of thanks
Can you please suggest a way to place a widget just *below* the header? I want to use it for announcements etc. I already have my navbar below the banner so it will mean having a widget just below navbar and stretched across entire length for announcements. My site: http://blog.thetradersforum.net/
Any help will be much appreciated.
I am getting a parse error: “Parse error: syntax error, unexpected ‘}’ in … : eval()’d code on line 24″
I am using in openhook plugin and with full-width. I also have been playing today, so I have a custom header background code in place and/or logo image code in place.
Could this all be causing an issue when trying to play together?
Thanks, am hoping to get this going to play around with it a bit.
Robyn
This was a really helpful tutorial. Is it possible to add a second widget in the header? I’m using the 3 column layout in Thesis 1.7.