kristarella.blog

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Blogging / Thesis full-width headers 101

Thesis full-width headers 101

by

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
Swap header and navigation

Doing that makes the header area structure,

  • div#header_area
    • div.page
      • div#header
      • ul#tabs

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

Reader Interactions

Comments

  1. Nice tutorial Krista, pretty sure this will come in handy as I’m taking a good long look at Thesis for a couple of upcoming projects.

    Cheers
    Mat

  2. I’ve been wanting a full width header and footer on my site for some time. I’ve also been thinking about a Thesis migration, though the full-blown move over isn’t a priority.

    Have you been looking into my thoughts again? ๐Ÿ™‚

  4. Wow what a great post!
    I was thinking about doing some of these changes on my site but just didn’t know how. I’ll be putting your tips into practice.
    They are very easy to follow and I really like the fact that you’ve already given us the html codes.
    Thanks again

  5. sweet action! Clear tutorial.. I’ve made some changes to my site… What do you think? Oh, how would I add a bit more space between my nav bar and blog title? Thanks!

  8. hey, loved your old site and loving your newly ported site ๐Ÿ™‚ Thanks for the superb full-width header write up.

  9. Thanks Mat! Hope it is useful.

    David — hah! Nope, no mind reading here, but since a few people asked me about it I’m not surprised more folks have been thinking about it.

    Cheers dinu! And Gregory, glad you found it easy to understand. I did give the HTML, but I hope everyone still gets the hang of using it and maybe learns to write some of their own. I found modifying my blog over the years a valuable learning experience.

    Miguel, glad you’re getting into customising. You can add more space with .custom #header #logo {margin-top:1em;} in custom.css. That nav bar is characteristic of the Revolution themes by Brian Gardner. Adding a second bar would involve adding a second list of links to the code I gave, e.g.,

    	<div id="nav_area_2" class="full_width">
		<div class="page">
			<ul>
				<li><a href="http://www.example.com/1/">Item 1</a></li>
				<li><a href="http://www.example.com/2/">Item 2</a></li>
			</ul>
		</div>
	</div>

    That would go in between the first nav_area and the title_area.
    As for the rounded corners, there is a thorough screencast at CSS Tricks.

    Glad you found what you were looking for David!

  11. Hi Kristarella
    Everything is working but for a big white space between the nav bar and the main page area as shown here.
    I’m sure the solution is simple, but I just can’t work it out.
    Thanks for you help with this tutorial. Much appreciated.

    cheers

    Allan

  14. What a great tutorial, kristarella! I noticed it sometime back and am finally getting around to implementing it on my test site. Just one question: I take it that the top two pieces of code,

    remove_action( ‘thesis_hook_before_header’, ‘thesis_nav_menu’ );
    add_action( ‘thesis_hook_after_header’, ‘thesis_nav_menu’ );

    are not really needed in view of the code you provide in the remainder of the discussion. Is that true? Right now my test site seems to be working without those two pieces, although I have not tried validating it yet. Just looking for some clarification before I ultimately do this to my main site.

    Thanks again. I’ll read the footer tutorial, too.

  15. Hi Bruce, that’s corrrect. The first bit of code is one way to change the location of the nav. It is not needed with the rest of the code.

  16. Great tutorial Kristarella,

    Any idea as to why this would shift everything to the right if you try to set Thesis to 3 columns with the content in the middle and a sidebar on the right and one on the left? This seems to be the only configuration that it does it on and I cannot figure out why.

  17. Thanks Krista! After customizing the footer, this was my next question for you. Nice to see it already answered so simply.

  18. Brilliant tutorial and exactly what I was looking for. Reads very well and the instructions were simple to follow.

    Thanks.

  20. Thanks! I’m now full width!

    Awaiting the full-width footer tutorial. I tried to figure it out, but gave up.

  22. hi kristarella,
    this is first time i visit ur blog. ur had very nice blog and content.
    i googled for thesis tutorial, then i found ur blog post.
    thank god, u really help me with header bg tutorial.
    check out my photoblog if u had time.
    i just need a time to create header graphic. now just using text for header.
    i’m newbie in php coding. thnx again for this tutorial….

    regards from Malaysia

  23. Ouch!

    I started to mess around with header formatting and I’ve gone wrong somewhere, screwing up my Home page in the process.

    Blog URL: http://www.ComputerAndOnlineSecurity.com

    The two columns at the right have disappeared and their content now appears at the bottom of the main content column. However if you click any of the [Click Here to Continueโ€ฆ] links you’ll see that the other pages are laid out correctly.

    I’ve reversed the changes I made as far as I could remember, but clearly I’ve missed something.

    Help required urgently if anyone has an idea what’s wrong. How did I make the home page layout different to the other pages?

    TIA

  24. Bill — The mistake is actually in your most recent post. A div element to align text left is opened and then the more tag is used to cut off the post on the home page and the ending tag for the div isn’t there on the home page. You’ll need to move the more tag out of the middle of the div.

  25. THANK YOU KRISTARELLA!

    I didn’t notice what had happened until after I’d started messing around with header design, and so I was looking in the wrong place for my error.

    I could be wrong but I’m reasonably sure I inserted the “more” tag in visual editing mode, meaning that Thesis/Wordpress allowed me to insert it in the wrong place. If so, then that’s something to keep a lookout for in the future.

  26. Kristarella – first, thank you for the wonderful tutorials! They are so helpful, as I am just setting up my blog at pickychoosymom.com/blog. Second, I wanted to chime in about the “more tag” All my text looked nice and neat – all the same size and how I wanted it. I added more tags and while the tags did appear, the text also went all wonky. The text on the post went changed to huge! All I did was add more tags in visual editing. I deleted a post and reposted to see if that would help. It did. I have figured out that by just changing the date can fix it (but not an option I really want to use) If I date it after a certain time on Feb 9 or later, all is fine. It also incresed the size of the Thesis Theme footer… Any thoughts? Is there a bug with more tag in Thesis?

  27. pickychoosymum — That’s a weird bug! I can’t see it though. Is it currently happening on all your posts old than Feb 9? They look fine to me. Which browser are you using.
    Doesn’t sound like a Thesis bug, I’ve never come across that, except for what Bill did a couple of comments ago — that was a Visual editor problem. Sometimes the Visual editor causes problems, or certain browsers spaz out at something (IE mainly).

  28. Kristarella,
    You’re right! I just loaded a different browser (Firefox) and it looks just fine. I’ve looked at it on 3 different computers (all with IE) and the font is huge on the older posts. Now I’m totally stummped… but at least I have more information! Thank you.

  30. PickyChoosyMum — Found it! In your post on Feb 9 there is a bit that says <span style='font-size: 12pt; font-family: "Times New Roman";'> If you go into the code editor and delete that (and any corresponding </span>) at the end of the post, the font size on the home page should be okay.

  31. Bill — what I see is that everything after the first post on your page is bold and for some reason IE defies the <strong> strong tags for the headings. The <!-- more --> seems to have a <strong> before it, but no </strong> after it. Remove that and it should be ok.

  32. Yeah, the closing </strong> tag is getting lost in translation.

    I have my <!--more--> tag formatted thus:
    <strong><!--more--></strong>
    which is just where and how I want it to appear. But when the <!--more--> gets translated into PHP, everything after <!--more--> is lost, including the closing </strong> tag.

    I wonder if it’ll display the way I want if I create a CSS class specifically for the <!--more--> tag? I’ll give it a try later when I get back.

  33. Bill — the <code> tags are mainly for styling and semantics, they don’t convert your HTML. You need to encode them in comments to see them. ๐Ÿ™‚

    The <!-- more -- > tag already produces the class “more-link”. So use .custom .more-link {font-weight:bold;} in your CSS to make it bold. Doing so in the editor, as you’ve discovered, won’t work well.

  34. OK, tried this…
    custom .more-link {font-weight:bold; text-align:right;}

    That works as far as the font-weight is concerned, but text-align is being ignored.

  35. Hey Bill, the text-align:right; will be ignored because .more-link refers to the link, which is an inline element, rather than a block element. Pretty much meaning that it only takes up it’s own little space inline with the rest of the text and doesn’t take up a block where it can be on the right or left. Try adding display:block; to the link style and the text-align:right; should work.

  38. Hi: thanks for the excellent tutorial. I am currently using the full width framework and have my nav area at the very top using the the following code ( modified from the one above:

    I am trying to lock or fix the nav area at the top so the entire page scrolls under it… how can i do that?
    thanks!

  40. my apologies for not encoding my code …

    I tried the position fix method on various elements, including the nav_area and still didnt work. when applied to the nav area, the whole strip becomes transparent and you can see the text scroll below it.

  41. Victor — No worries, just mentioning the code thing for next time. Sounds like the position thing worked, you just need to adjust the colour or opacity of your nav.

  42. hi- thx for the reply. it doesnt work really well, because after setting position to “fixed”, the whole nav bar ( which is currently placed above the header) disappears completely. want to check out my site? I have removed the “fix” settings now, but i can demonstrate it for you. …. any help you can provide will be very much appreciated.

  45. Palpitar, I’m not sure why. If you tried to paste the code you used, please remember you need to encode HTML and PHP in comments. If you only put something in functions, then it probably won’t work because the most important bit that changes how it looks is the CSS.

  46. Kristarella,

    How can I get rid of the space under the header and above the post. I tried all the codes in your tutorial and it is still there…

    Also, how did you do your blog? I would like mine to look the same but different background!

    Thanks!

  47. Thanks for the tutorial but after searching for the better part of a day I can’t seem to find anything about adding a custom background once you go to full width for the header. The body of the page still stays in the same area so I have been trying to get the background to change but can’t seem to do it. Is there an easy way or am I missing something.

  48. Toki — I can’t be sure without seeing the problem in action, but I guess you would either want .custom #header {padding-bottom:0;}, .custom #header {margin-bottom:0;} or .custom .post_box {padding-top:0;}.
    I created this blog mainly with Thesis built in options and CSS. I couldn’t in my right mind give you my design while I’m using it, since for business and recognition I think I should have something unique, but the single column framework is there in Thesis for you to use as you like.

    Todd — I’m not 100% sure what you mean, you seem to have a coloured background and a full-width header on your site. Perhaps it would help you to use Firebug and check out the CSS for my site, SimonPreacher.com, Lofts.com Blog. They’re all built on Thesis with the Full-width framework and a body background of some kind.

  49. Thanks for your quick response and I in know way wanted your design, I was just wondering if there was something simple I was missing, which there probably is. I got mine to work by dropping the graphics url in the title_area and turning off the header space. Otherwise it put a header in the title space and also one down below it in the body if I turned off the full-width. It worked fine when I turned on the full-width but I couldn’t get the background to change. Anyways, thanks for your help and I will check out the css on the other sites you gave me.

  50. Thanks for responding…

    I may be doing something wrong but I can not seem to make the “old header space” go away as you did. I followed the code also…

    Any advice?

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

  52. 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 .custom or body.custom will over-ride style.css.

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

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

  55. Your blog has been very very helpful! Do you know if there’s a way to center the navigation menu without doing “eyeball” padding.

  56. 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 of auto.

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

  58. 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');

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

  60. 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. ๐Ÿ™‚

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

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

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

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

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

  68. Does someone with (way) better CSS than I have know how to make this top banner clickable to the home page?

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

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

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

  73. 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;}.

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

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

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

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

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