Some of the information in this tutorial is deprecated as of Thesis 1.5. See the updated instructions Full-width headers in v1.5.
I recently ported my blog to Thesis by DIYthemes.
Thesis has excellent SEO, and with it you can choose the number of sidebars that you want and their position, you can adjust the widths of content and sidebars, and you can change fonts across the webpage… all from dropdown options in the admin area. There are a bunch of other options allowing you to change the nav menu, size of gravatars, comment count, author link, category, date and tag display, and more. If you’re not a coder you can receive assistance with custom CSS and PHP hooks on the forum.
For those reasons and a few others I am now using Thesis. The new full page framework makes it fairly easy to have full-width headers and footers. In this post is a how-to on customising your header.
Full page framework
The first step of making a full-width header and footer is to choose the Full-width framework from the Design Options page.
NB if you have done the coloured background thing with the page framework, selecting full-width will mess it up. You’ll need to rearrange your CSS a bit. The following assumes you haven’t modified much of your design yet.
Prepare header and navigation
The easiest way to swap the positions of the header and navigation is as described in the Thesis documentation, by adding code to custom_functions.php.
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');
Swap header and navigation
Doing that makes the header area structure,
- div#header_area
- div.page
- div#header
- ul#tabs
- div.page
Which basically means that div#header_area spans the full width of the page and everything else is inside that.
On the Tip’d blog Chris has created new divs, which make it easier to give the header and nav different backgrounds. If you do that with custom_functions.php I don’t think it’s possible to remove the #header_area. However, for this demonstration I’m going to do it anyway and just hide #header_area with CSS.
Place the following at the very bottom of custom_functions.php.
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
remove_action('thesis_hook_header', 'thesis_default_header');
function full_width_header() { ?>
<div id="nav_area" class="full_width">
<div class="page">
<?php thesis_nav_menu(); ?>
</div>
</div>
<div id="title_area" class="full_width">
<div class="page">
<div id="header">
<?php thesis_default_header(); ?>
</div>
</div>
</div>
<?php }
add_action('thesis_hook_before_html', 'full_width_header');
This adds the nav above the title, or you can take the whole nav_area and move it below the title and before <?php }, to have the nav below the header.
Replace header with new title and navigation
Styling the header with CSS
All your CSS should go in custom.css.
Remove unwanted styles
There are a bunch of borders and related styles that we don’t necessarily want in our new header, so I’m going to remove them. I’ve done it in a specific way that should allow you to add some back in if you want to.
.custom #header_area{display:none;}
.custom #nav_area ul {border-bottom:none; border-left:none;}
.custom #nav_area ul li {border-width:0; margin-bottom:0; padding-bottom:0; background:none;}
.custom #header {border-bottom:none;}These styles hide the original header (unfortunately the empty div is still in the markup); remove borders, padding and margin from the nav that were mainly related to current page styles; remove the header double border.
Remove unwanted styles
Add some new styles
Now we’re set to add some backgrounds and some more space for the nav, which feels a bit squished up the top, as well as some borders, which just make things feel much more complete. Building on the previous CSS:
.custom #header_area{display:none;}
.custom #nav_area {background:#c3d9d6; padding:0.5em 0; border-bottom:1px solid #ddf;}
.custom #nav_area ul {border-bottom:none; border-left:none;}
.custom #nav_area ul li {border-width:0; margin-bottom:0; padding-bottom:0; background:none;}
.custom #title_area {background:#de6a61; padding:1em 0; border-bottom:1px solid #c55;}
.custom #header {border-bottom:none;}
Background colours and borders
I like to use background images to spruce things up, then hide the title and description. In thesis you can opt not to show them, but I like to leave them in and hide them in case someone loads the page without CSS and because Google bots don’t care about CSS.
.custom #title_area {background:#de6a61; padding:1em 0 0.5em; border-bottom:1px solid #c55;}
.custom #header {border-bottom:none; height:150px; padding-top:0; padding-bottom:0; background:url(images/header.png) center left no-repeat;}
.custom #header #logo {display:none;}
.custom #header #tagline {display:none;}
Title & description hidden, background image added
Coffee cup is from OpenClipart.org.
The other option is to replace the default title and description in custom_functions.php.
<div id="title_area" class="full_width">
<div class="page">
<div id="header">
<p id="logo"><img src="<?php bloginfo('template_directory') ?>/custom/images/header.png" alt="<?php bloginfo('name') ?>" /></p>
</div>
</div>
</div>The process to customise your footer is similar, but even easier since there is only the one footer element, as opposed to both the title and nav bar. I’ll follow up with a post about footers in due course.
Questions?
If you have any questions, ask away! There is a forum thread so other thesis users can discuss it too.
Well, I checked the code and compared it to mine and everything seems to be as it should be. I actually inserted a graphic in at one attempt, since I saw you were using graphics for your background. The graphic spilled out into the border so I knew something was working. The bottom line, as far as I can see, is the body background in the style.css is not overlapping the background on the body.custom. I have utilized a graphic to get around it for the time being but wonder what the real problem is and if it can be solved.
Todd — the reply about my design was to Toki’s question.
Toki — my answer is pretty much the same as before: without seeing it, I’m not sure. If you want to, you can paste the custom_functions.php code you’re using, as well as your custom.css, in a Pastebin and I can take a look.
Todd — I’m afraid you’re still not really explaining what you’re trying to do properly. So I don’t know what the “problem” is. I can see that you’ve inserted a background into the body fine. If you want a body background, but the content to stay white or some neutral colour, you need either
.custom #content_area .page {background:#fff;}or#content_box {background:#fff url(../images/dot-ddd.gif) repeat-y 51.3em 0;}.Any style in custom.css for
.customorbody.customwill over-ride style.css.SWWWWWEEEEEEEEEEETTT – I had gotten close by figuring out the .custom .page but that made the nav bar and the footer bar white as well. I needed the #content_area to make it work out right. Thank You. Also I discovered – because I wanted my header to span the entire page that if I took class=”full_width” from the title-area and added it to div id = header in that php div code it expanded it across the page. I was getting hung up on that as well but seems to have solved the problem. I think that might have been Tokis problem because it was mine for a while. It was like there was 2 headers. Thanks again. Oh and about your blank wall – a poster of a sunrise would be both relaxing and motivational.
Todd, glad it’s solved!
Thanks for the poster idea. I will add it to my ideas “list” (no actual list yet, it’s in my head).
Your blog has been very very helpful! Do you know if there’s a way to center the navigation menu without doing “eyeball” padding.
Sorry Rowell, that’s the only way I know of at the moment. Unless you give the
lis a width, calculate how wide the nav will be, give it that width and give it left and right margins ofauto.Hey Kristarella – I’ve been trying to get a full width banner together (something that looks like: http://www.bleikamp.com/) It seems simple enough, I’ve been trying to use two different divs for the nav and header like Chris did, but for some reason I can’t get it to work out. I think it has something to do with the custom_function bit that I’ve put in. I basically used what you showed above, but removed the “header” div from around the php b/c that was publishing two header divs… any thoughts would be great, here’s my test site:
http://www.lexingtontrainers.com/wordpress/
Gary — you don’t need the title area thing in your case because the nav is above the header. We only need a new title area to get the nav under the header, which thankfully won’t be the case anymore with the next release of Thesis.
Use something like,
remove_action('thesis_hook_before_header', 'thesis_nav_menu'); function full_width_header() { ?> <div id="nav_area" class="full_width"> <div class="page"> <?php thesis_nav_menu(); ?> </div> </div> <?php } add_action('thesis_hook_before_html', 'full_width_header');Thanks for the help. That worked well. For some reason I had to try it a couple times… but it ended up working just like you posted.
Kristarella, thank you *so* much for this and all your online tutorials. I have zero coding experience but have been able to do some satisfying customization of my site thanks to nothing more than your and KingdomGeek’s generosity and my own cojones. :)
Can you look at the top header in Firefox and let me know what you think is wring? I have no clue as to how to fix it.
TG — if you mean the list of links at the top it’s because you haven’t applied any CSS to ul#topnav.
Thanks!
I have CSS applied that works in IE6 and IE5:
/* Top Nav bar */?
?.custom ul#topnav {?
?border-style: none;?
?list-style-image: none;?
?list-style-position: outside;?
?list-style-type: none;?
?background:#E4E4E4 none repeat scroll 0 0;?
?width: 100%;?
?float: left;?
?}?
?.custom ul#topnav li { float: right; padding: 3px 10px 3px 0px; }?
?.custom ul#topnav li a { font-size: 1.1em; color: #000000; }?
?.custom ul#topnav li a:hover { text-decoration: underline; }
/* End top nav bar */
I can’t figure out why it doesn’t work in Firefox 5.
Any ideas?
The ?’s are not in the CSS…they were from the copy/paste
Actually those question marks reveal the problem. There are some dodgy hidden characters in your CSS file. You can see them if you look at the CSS file in FireFox. That sort of thing usually happens if you edit the file in a rich text editor or save it as rich text rather than plain text. What did you use to edit the file?
I was using a server-side text editor that may be the culprit.
Thank you so much! I was racking my brain and couldn’t figure it out.
Ah okay! Yeah, that is frustrating! If they have both a text and html editor options you might need to choose the html option? Dunno, every hosting company seems to do a different thing.
Does someone with (way) better CSS than I have know how to make this top banner clickable to the home page?
Blake — it depends where you finished up in the tutorial and which version of Thesis you are using. I’m thinking that I should write a refresher post with the most up-to-date info on the topic.
Hey there, Kristarella!
Thanks for being such a wonderful resource! You’re really made learning the Thesis theme a lot easier. I’m stuck on one little thing, though.. there is a line of space between the bottom of my header and the top of my navbar that’s driving me crazy! I can’t get rid of it. I’ve tried taking all the padding, margins, etc. out of my header and nav bar to no avail. Any ideas of what it could be? The site is at http://www.davacorp.com/KarenTest
Any suggestions would be much appreciated.
Thanks!
Hi Ari,
Which browser is the space in? It looks fine in Safari and Firefox on my mac.
I’m working in firefox on a mac too! I tried to hide it as much as possible. If you hover over the navbar, you’ll notice a little line of lighter gray at the top of the buttons. That’s what I’m trying to get rid of.. maybe I’m just being too anal?
Oh, I see. Yeah, it’s a really weird thing when there is a linked image sometimes there is an extra space below it. Try
.custom #header {height:130px;}.thank you so much! you have no idea how much that was bothering me. You’re such an amazing resource! Thank you again!!
Best
a
Kristarella,
You are preeminent. Love it.
Question: If I set the header and nav to full width, how do I keep the body/post content the original width? (I am using a 2-column setting with 900px width.)
P.S. Why do you rock so much?
Grant — Generally full-width is an illusion: the background colours are full-width, but the content of those areas remains the same width as the content. I’m not 100% sure what you’re asking. Maybe my video on the full-width framework will answer that for you.
Hi Kristarella. I’m just now trying my hand at this full-width stuff – followed your steps above and it looks like, for the most part, it worked. The only problems being that the color breaks in the nav bar – it has white space in the nav area and between sections. Any idea what I might have missed?
Testing it on this site.
http://www.villageautobodybatavia.com/
Matt — you most likely need
.custom #nav_area .page {background:transparent;}This is new in version 1.6 & I haven't had achance to update my tutorials yet.
I figured it had to be something with Thesis 1.6 – worked like a charm. Thanks!
Hi Kristarella,
I love the full width header and footer, but would like the REST of the page to not be full width. It just feels too crowded to me, and I like the look of your own page better. Is there a way to do that?
Kayle — You should be able to give
#content_areaa background, while leaving the.pagebackground in place. My video about the fullwidth framework should help you see how.I fixed my problem by carefully following your tutorial. Thank you so, so much.
Amazing tutorial, I’ve got great ideas for my thesis based website.