kristarella.blog

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

You are here: Home / Blogging / Full-width headers in Thesis 1.5

Full-width headers in Thesis 1.5

by

Update 18 May 2010: Although the title is “in Thesis 1.5” this tutorial is still relevant. I have made a couple of updates since it was first written to accomodate more recent changes in Thesis, but really this tutorial is for Thesis 1.5 and beyond!

I previously published a tutorial on full-width headers in the Thesis theme.

It wasn’t the easiest thing to do in Thesis, prior to version 1.5, to make a full-width navigation area beneath a full-width header. Now thanks to a new hook, thesis_hook_before_content_area, it has become significantly easier and way better!

The code in the previous tutorial had us make a new title area in order to place the nav area wherever we wanted. However, that created some invalid code, by duplicating div id="header" [ref]you’re not supposed to have two elements with the same ID on a web page[/ref]. We don’t need to do that anymore!

Step 1 — Full-width framework

Thesis Full Width Framework
In the Thesis Design Options you need to set your framework to full-width.

This produces HTML that look like:

<div id="header_area" class="full_width">
	<div class="page">

		<ul id="tabs">
			...
		</ul>

		<div id="header">
			<p id="logo"><a href="http://snoopy.local/mu">Snoopy Test Sites</a></p>
			<h1 id="tagline">Just another Snoopy.local weblog</h1>
		</div>

	</div>
</div>

With that in place you can create a full-width header background with CSS.
This goes in custom.css

.custom #header_area {background:#213C63;}
	.custom #header_area .page {background:transparent;}
		.custom #header {border-bottom:0;}

Update 25th February 2010: Added CSS for .custom #header_area .page to work with the new CSS in Thesis 1.6 related to the colour Design Options.

Thesis Header Background

Step 2 — Full-width nav area

The code you need for a full-width nav area goes something like…
This goes in custom_functions.php

function full_width_nav() { ?>
	<div id="nav_area" class="full_width">
		<div class="page">
			<?php thesis_nav_menu(); ?>
		</div>
	</div>
<?php }
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_content_area', 'full_width_nav');

The line remove_action('thesis_hook_before_header', 'thesis_nav_menu'); removes the nav menu from its default position, allowing us to reinsert it wherever we want.
add_action('thesis_hook_before_content_area', 'full_width_nav'); adds the new navigation area after the full-width header area. If you’d like it to go before the header, use add_action('thesis_hook_before_html', 'full_width_nav'); instead.

The rest of the code gives us a nice bit of HTML, similar format to the other full-width areas of Thesis, which we can style with CSS.
.custom #nav_area {background:#F0ECDB;}
And here’s just a bit more CSS to make it look prettier…

.custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
	.custom #nav_area .page {background:transparent;}
		.custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
			.custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
			.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}

Update 12th May 2010: Added CSS for .custom #header_area .page to work with the new CSS in Thesis 1.6 related to the colour Design Options.

Thesis Full-width Nav

Check out my previous tutorial, or CSS custom headers for info about adding images to your header. Also see Thesis nav menus for more info about the navigation code.

Reader Interactions

Comments

  1. Great post. I think just about every design we’ve done has been with the full-width framework, and now it’s even easier to use!

    The final look you’ve shown looks sweet too.

  3. Hi Kristarella,

    Nice tutorial. I’m just about to install the Thesis v 1.4.2. (I do not want to go for the 1.5 beta yet since it looks like there still are some bugs) I was about to follow your previous tutorial on how to make a full-width header with v 1.4.2. Right now I’m just concerned about what will happen the day I’m upgrading to 1.5? Will I then loose the full-widh header customization? Or will I have to do it all over again?

  4. Stian, you won’t lose any changes that you make in 1.4.2, but I’d really recommend waiting on making a full-width header until 1.5 because the old method is longer, trickier and less semantic.

  5. I decided to go with the 1.5 beta version instead, and I agree, it was way easier to make a ‘full-widht header’ in 1.5 šŸ™‚

    Am I allowed to ask you one more question?
    I’m trying to add an additional menu in the header:

    /* Additional menu in the Header */
    function additional_menu() {
    ?>

    Home
    About
    Archives
    Contact

    <?php
    }
    add_action(‘thesis_hook_header’, ‘additional_menu’);

    This function gets the job done, but not exactly like I want it to. I would like the menu to be placed in the header, but a little bit further up (on the same line as the title). This is where my html and CSS knowledge stops:)

    Do you have any suggestions on how to go forward to achieve this? Maybe this can be achieved with some CSS styling?

  6. Stian — you might want to try thesis_hook_before_title and then float the menu to the right with .custom ul#additional_menu {float:right; width:500px; line-height:4em;}. You might have to play with the numbers to your liking.

  8. Kristarella,

    Nice, I went to the beta a while back however, when I view the various themes in wordpress admin preview section it still says 1.4.2? Is that right or did my upgrade attempt fail? šŸ™‚ Thanks,

    -Mig

  11. Took FOREVER to get my image into the header but can’t figure out now, how to deal with the headline and tagline issues I have. Can you help Kristarella? Have a look at my site and here is the code below.
    What am I doing wrong? Thank you in advance!
    Richard

    */
    body.custom { background: #44443f; }
    .custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0.3em;
    background: #33332f; border: 0.4em solid #3e3e3a; }
    .custom #page { background: #fff; }
    .custom #header #logo a { display: block; height: 152px; width: 168px; background: url(‘images/Picture2.png’) no-repeat; outline: none;

    .custom #header #tagline { text-indent: 299px;}
    .custom #header {text-indent: 299px;}
    .custom a, .custom a:visited { color: #473C8B; }
    .custom a:hover { color: #473C8B; }

  12. Richard, you’re missing some crucial curly braces and text-indent probably won’t move the text the way you want it to, padding-left is better.

    Your CSS should be more like:

    body.custom { background: #44443f; }
.custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0.3em; background: #33332f; border: 0.4em solid #3e3e3a; }
.custom #page { background: #fff; }

.custom #header #logo a { display: block; height: 152px; width: 168px; background: url('images/Picture2.png') no-repeat; outline: none; padding-left: 299px; }
.custom #header #tagline { padding-left: 299px; }

.custom a, .custom a:visited { color: #473C8B; }
.custom a:hover { color: #473C8B; }

  13. Kristarella,
    Thanks SO much! You are too kind. I have to tweak my headline a bit still to get it on one line. šŸ˜‰ Care to weigh in? Bless your heart girl.
    Richard

  15. I do yes! But I’m trying to move that tagline up and or the headline down. Ideally, I’d like to have them meet somewhere in the middle. I appreciate very much the hand holding Kristarella. When I use firebug, it looks like the tagline element is way long – so wide it covers the entire width of the page which isn’t necessary. Number one, I don’t know how to move the tagline up or the headline down, and I’m concerned that the tagline element when it does get moved is going to interfere with my photo. Any help that you are willing to offer is deeply appreciated. I thank you in advance.

  16. Richard, I’m not sure if it works in IE, but you can try
    .custom #header #tagline {margin-top:-7em; margin-bottom:6em;}

    The reason it spans the whole width is because it is a paragraph and paragraphs are block level elements whose natural behaviour is to span the whole width of the container they are in. This is normal and quite correct, but can be fairly easily manipulated with CSS.

  17. hmmm. Thank you. Tried it but the tagline just ended up all the way on the left under my pic. I’ll keep trying. Can’t thank you enough for helping me.
    best,
    Richard

  18. I was actually just googling around looking for a WordPress theme with a full width header that I can tweek and mod and what do you know, here’s your Thesis article.

    I can’t help but think I need to look at Thesis..grrr..

    Now that I’m not going to be designing I’ve converted my blog back to a 2-column, simple as you like, blog and I’m trying to keep everything as simple as possible so I can just post my travel blogs and little bits of info. Maybe Thesis might be the way to go…

  20. Glad it worked Richard!

    Mat, I find that Thesis is good for pretty much any project: simple or complex, static or dynamic. Some do find it takes some getting used to though, it does have a slightly different (but in the end safer and more efficient) way of doing things.

  21. Kristarella,

    Thank you for creating this tutorial.

    I have done the following:

    1. Edited “custom.css” and added the following:

    .custom #header_area {background:#213C63;}
    .custom #header {border-bottom:0;}

    .custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
    .custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}

    2. Using Thesis Open Hook, I added following to the section called, ” Before Content ” and checked the box called, “Execute PHP on this hook”:

    function full_width_nav() { ?>

    <?php }
    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_before_content_area’, ‘full_width_nav’);

    After saving everything and refreshing my site, I see the following error message:

    Parse error: syntax error, unexpected ‘}’ in /home6/liberub1/public_html/wp-content/plugins/thesis-openhook/functions.php(293) : eval()’d code on line 7

    You can see this on my site.

    Thank you,

    Matt

  22. Matt — When you’re using OpenHook you don’t need to wrap the code in a function and use add_action or remove_action, that method is only for custom_functions.php and OpenHook does those bits automatically for you. Also I don’t think OpenHook has been updated to include thesis_hook_before_content_area: the Before Content box won’t give you a full-width header, so at this stage you need to use custom_functions.php until 1.5 final is released and OpenHook is updated.

  24. Hi Kristarella,

    I asked a dumb question before and you were kind enough to answer me, so here goes again! I’m trying to insert a graphic as a custom header using Open Hook. I am terrified of erasing everything ( like I already did) so now I’m confirming before trying šŸ™‚ I don’t know anything about code yet, so I copied something from the web and changed the image name
    <a href="index.html"><img src="monk1.jpeg" width="960" height="300"
    alt="panamom.com" border="0"></a>
    But the image is not showing up, though the dimensions for the space are. Is this because the image is too large or because its not coded right? I put the image in the thesis- custom-image folder? I saved the image as a jpeg and a gif and neither one will show up.
    If anyone at all would be so kind as to help with this, the blog is panamom.com
    thank you!!
    Pam

  25. Pam, If you’re using OpenHook you need to use a different file path. When you just quote “monk1.jpeg” it assumes that the image is in the same folder on the server that you are current on. So when you’re on the home page at www.example.com the image must be at www.example.com/monk1.jpeg when you’re on the about page though, the image won’t show because it will think it’s at www.example.com/about/monk1.jpeg. If you put a slash before it, it will think that the image is always in the home directory. If your image is in the custom/images folder use <img src="<?php echo THESIS_CUSTOM_FOLDER; ?>/images/monk1.jpeg".
    Same goes for the link, you’ll probably need a slash before it so that it always goes home and not just to the page you’re on.

  26. hmm. That’s not working. When I cut and pasted your code it only shrank the size of the header ( I had 960 x 300 specified ) but still didn’t display the image. Is there another location I should be putting the image in? Is there a size limit for the image or will Thesis resize it regardless?
    I did not check the “execute php” since i was using HTML, is it going to crash the site if I do that? šŸ™‚

  28. Pam, you should only have replaced the src=”” part of you code with what I gave you. I forgot to mention that you need to check the box that says “execute PHP” in OpenHook. However, I went to your site and tried every permutation of the image URL assuming the image was in your custom/images folder and I couldn’t find the image. You need to confirm where your image is on the server and you need to use its exact name. I.e., it matters whether the extension is .jpeg, .jpg, .JPG or .JPEG.

  30. Elliot, bit of an unrelated question on a post about headers…

    Anyway, I think you need

    .custom #footer {float:left; width:100%;}
.custom #footer p {clear:left;}

    The reason is that divs don’t wrap around floated elements properly and because the widgets are floated to the left the background colour of the #footer isn’t going right around them in IE. However, floated divs do wrap around other floated divs.

  31. Sorry I had multiple tabs open while looking through your site – I meant to post the comment here (https:\/\/”www.”kristarella.blog/2008/11/thesis-footers-101/)! *embarrassed-smile*

    Thanks for your reply!

  32. Oh, haha. That’s cool, that’s a pretty good reason and understandable too. šŸ˜› Glad you’re finding multiple posts of mine useful!

  33. Hi! I’m new to your site. My site is upgraded to thesis 1.5 and I would like a full-width header. The only thing I’m a bit confused about is the size the header image needs to be to work. Thank you SO much!! Nina

  34. Great tutorial! (As usual…)

    One note for you that may help others with this though. I made a rookie mistake working on my third or fourth Thesis website — I couldn’t get your custom css to work after I installed 1.5. I banged my head for over an hour, reinstalling things, renaming folders etc. until I finally figured it out: I didn’t have the Custom Stylesheet option enabled in the Thesis Options!

    (Perhaps the default for this should be set to “Yes”…?)

    Thought I’d mention it because there are probably others out there who also forgot to check this after upgrading.

    Now it’s chugging along…

    ~Graham

  35. Nina — Welcome! The image can be as wide as you like, but the main content of it should probably not be wider than your content. Then the edges of the image need to blend out to a solid colour or a repeating background. Something that can span the width of the browser, no matter how wide it is.

  37. Many Thanks…

    Followed your instructions, so far so good… Can you tell me how to change the headline colour please?

    Wayne

  38. Got it sorted…
    I use –
    .custom #header #logo a {color: #ff6600;}
    .custom #header #tagline {color: #fff;}

    The top one changes the header logo colour and bottom one changes the tagline underneath..

    Wayne

  39. Quick question!
    My page has the following syntax:
    DIV –> ID HEADER_AREA
    DIV –> CLASS PAGE
    DIV –> ID HEADER
    P –> ID LOGO
    UL –> ID TABS

    So the tabs are under the header logo. My issue is that between this logo and the tabs (nav), there is a small space filled with white.

    Using inspector, I was able to find out that it’s because of this CSS in layout.css:
    #header #logo
    font-size: 3.6em
    line-height: 1.167em

    So I went in my custom.css and wrote:
    .custom #header { font-size: 0em; line-height: 0em; }
    .custom #logo { font-size: 0em; line-height: 0em; }

    But when I check back in Inspector, the .custom style is beefed up and overwritten by the two lines up there.

    How can I overwrite the layout.css?

  40. Karim — it’s because when IDs are listed consecutively with a space in between like #header #logo that is one style declaration for the element #logo inside #header. So, to override it you need to use one style declaration .custom #header #logo. However, if you don’t need the title (which has the ID “logo”), you can just uncheck the option to display it in the Thesis Options page under Display Options > Header.

  41. Thanks for the help.
    The option is unchecked already in thesis options! Not sure why I see that anyway.

    Actually, something weird. In IE, that little space is not there but in Chrome, it is!

  42. Karim — I’m afraid I can’t give you anything more specific without seeing the problem, but it might help if you give something a height. Browsers have style default and I find sometimes a link can get a bit of extra space beneath it, so if you give a height to the div that surrounds that link it can help.

  43. Actually your code worked! What I was saying was that before the fix, IE did not have this issue while chrome did! Anyway it’s fixed now! Thanks šŸ™‚

  44. After great success with these instructions on one site, I’ve implemented the full-width options for header and nav again. However, it’s come to my attention that in Firefox 3.0.6 the site is loading very strangely. Here is a link to my css.

    It’s almost as if the “full width” isn’t taking effect … Thank you very much for taking a look!

  45. Suzi,
    Your site loads exactly the same in Firefox and Chrome on my PC!
    Did you clear your cache (wild guess)?

  46. Suzi — it seems right on my computer too, it looks good. I made a little note of anything I saw that was not quite right, but overall the full-width seems to be okay according to your stylesheet.

  47. Thanks Kristarella and Karim – Browsers are picky things … but great to know the issue isn’t replicating … on to tweaking and getting her up! šŸ™‚

  48. Suzi,
    What plugin (or script?) did you use for the flash slideshow under your header? Did you use jsquery?

  49. I used SlideShowPro. I’m a huge fan mostly because of SlideShowPro director (a cms management tool). If you have FLASH it’s completely customizable ….

  50. Hi Kristarella šŸ˜‰

    How can I make a second Full width navbar on top? I’m struggling at this for weeks with no luck. Could you help me?

    :*

    @estevaosoares

  51. EstĆŖvĆ£o — if you’ve got one nav at the top of the page using the full-width function then you can add another almost the same in there:

    function full_width_nav() { ?>
	<div id="nav_area" class="full_width">
		<div class="page">
			<?php thesis_nav_menu(); ?>
		</div>
	</div>
	<div id="nav_area2" class="full_width">
		<div class="page">
			<ul id="tabs2">
				<li><a href="">First item in 2nd nav</a></li>
				<li><a href="">Second item in 2nd nav</a></li>
			</ul>
		</div>
	</div>
<?php }
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_content_area', 'full_width_nav');

    You need to write a new unordered list for the second nav because thesis_nav_menu(); should only be used once. Then you will need to copy the styles for ul#tabs and add them to ul#tabs2.

  52. Hi, Kristarella,

    I enjoyed your tutorial. However, I’m having a bit of a problem getting the headers for both my blog and my website to display correctly. One floats to the left, the other to the right. The strange thing is, I copied the code from one site to the other, so they should be exactly the same. Could you take a look and let me know what I’m doing wrong?

    Many thanks!

    Blog
    Website

  53. Deborah — I can’t really compare them at the moment because it looks like the header is showing on the blog, but there is no header showing on your site (custom.css seems to be empty). It’s not that the header is floating left or right, but it is the background of the wrong element. It kind of looks like you’ve combined several tutorials, including the old full-width header tutorial and a non-full-width header tutorial.

  54. Hi, Kristarella,

    I followed your latest tutorial and succeeded in getting the full width header. The problem I’m dealing with now is getting my logo image to display. It will flash up for a brief moment, and then disappear. Below is the code I used. Where do I place the image code so that it displays?

    .custom #header_area {background:#651b1c;}
    .custom #header {border-bottom:0; height: 150px; background:url(images/DeborahWoehrHeader.jpg) center left no-repeat;}

    .custom #nav_area {background:#000000; border-bottom:1px solid #ffffff; padding-top:10px;}
    .custom ul#tabs {border-bottom:0; border-color:#000000;}
    .custom ul#tabs li {border-color:#000000; background-color:#000000;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#000000;}

    Thanks again for your help.

  55. Hey Deborah,
    As per the tutorial in this post, I think you should delete the stuff with title_area in your custom header code, that is what is interfering. For the old tutorial we had to create title_area and hide header_area, but we don’t have to anymore because there are new hooks that we can use to put the nave wherever we want. That is probably why your logo flashes and then disappears, because there’s something funny going on with #header…

    Now that I’ve navigated to your blog it looks like you’ve managed to figure that out yourself. Good work! Sorry for the delay in my reply.

  57. Hey Kristarella!

    I’m having some trouble with the header viewed in Internet Explorer. The header will not display and just shows the alt text and a red x. I know I need a ie hack and have ut on in, but I am having trouble figuring out just what code to enter that will fix it. Any ideas? I know it has something to do with the size of the box that displays it, but I can’t seem to figure out what size that box should be.

    As always, thank you so much for your help!

    Ari

  58. Ari — Sorry, but the header is showing up in my IE6,7 and 8 so the code must be fine. Maybe you had a temporary connection problem and the image didn’t load.

  63. Here in source code it’s showing 2 headers, but actually in CSS there is only one header,how to remove default header from thesis, which is coming in source code but nothing has been written in custom.css file for the same.

    yeah sure, please check the site : http://www.tips4trade.com for details.

  64. Pooja — custom.css does nothing to add or subtract elements from the source code. You must be adding an extra <div id="header">...</div> via custom_functions.php (perhaps from following the old header tutorial?). Instead add the contents of your header to the thesis_hook_header or thesis_hook_before_title hook. Not adding in a whole new header div.

  65. Hi –

    Thank you so much for the tutorial. I placed this on a new site that I’m doing and for some reason the CSS isn’t working all the way across or for the nav menu. I’m sure it’s a simple explanation. Using Thesis 1.6 if that matters. Site is travelgawker.com. Thank you!

  66. Brendon — In 1.6 you need to use .custom #nav_area .page {background:transparent;} (or the colour that you’re using for the whole nav_area instead of transparent). That’s due to the new design colour options assigning background colours that weren’t there in 1.5.

  69. Thanks Kristella. Last question: Do I keep everything else the same in the tutorial to achieve the styling?

  70. Ceasor — Everything else regarding the header should be fine. The CSS for the navigation menu is quite different; you might be able to just swap ul#tabs with ul.menu, but to make sure you should check out the video about the new nav controls on the DIYthemes site and also my Firebug video to learn how to easily inspect the CSS on your site.

    I will be updating my Thesis related tutorials for 1.6 compatibility, but I’m not sure when I’ll get around to it.

  71. This is a great post. I have one question though and I am sure for a professional coder it is an easy one. What if you are using a header image for the header instead of just a colored background? How do I get the image to appear full width without the white space?

    I am rocking Thesis 1.6 on 10 different sites. You can see an example at Organic Renaissance. I have it set to full-width framework and the page padding at 0.5 (even if I set this to 0.0 it doesn’t give me the header image at full width. The code for the existing header is in custom_functions.php and looks like this (after encoding):

    remove_action(‘thesis_hook_header’, ‘thesis_default_header’);add_action(‘thesis_hook_header’, ‘custom_image_header’);function custom_image_header() {?> <p id="logo"><a href="<?php bloginfo(‘url’); ?>"><img src="<?php bloginfo(‘template_directory’); ?>/images/header.jpg" alt="<?php bloginfo(‘name’); ?>" title="<?php bloginfo(‘name’); ?>" width="100%"/></a></p><?php}?>

    What am I missing to get it full width?

    Any guidance is greatly appreciated.

  72. Vincent — Unless you have a seamless repeating image, a single image will not be full-width of the browser (which is what the tutorial is about). If you have an image that you intend to go in the middle of a background colour that goes full-width, then that’s fine. What you’ve got on Organic Renaissance is pretty much supplementary to anything in this tutorial, it is replacing the title and tagline with an image, while the tutorial doesn’t really touch those things…

    If you’re trying to get the header to be the full-width of the content (rather than the browser), you might need

    .custom #header_area .page {padding:1.1em 0 0;}
.custom #header {padding:0;}

    I.e., to remove the padding from the sides and bottom of the header so there’s no white bits, and the image would need to be at least 949px wide.

  73. Kristarella:

    Thank you for the prompt reply and information.
    Yes, you are correct, I am simply trying to get the header to be the full width of the content (rather than the browser).
    While I am somewhat familiar with HTML, CSS and some Java Script, I am a novice with PHP and WordPress’ folder hierarchy, trying to learn more daily. Where does that code go?

    I tried placing it in Custom_Functions.php and it had no effect.

    Does it go in the custom.css or layout.css file?

    The header image is 993X106 so per your specifications, we have a large enough image.

    Thank you in advance for your guidance.

  74. Vincent — that code should go in custom.css. I just remembered that removing the padding from the .page area will reduce the width of that section so I think you will need to increase the width a bit:

    .custom #header_area .page {padding:1.1em 0 0; width:97.1em;}
.custom #header {padding:0;}

    Also, I think you would be interested in my video on the full-width framework.

  76. OK, so riddle me this, Batwoman, I was able to update the headers across all 10 sites to be the full width of the content and they look so much better (thank you very much!)………BUT, what if I want to be supercool like you and use a different sized image than a 993X106 header?

    So you don’t think I am lazy, I went through your complete tutorials on full width headers and Firebug (this was excellent because I wasn’t aware of all that Firebug can really do) and then I used some reverse engineering Firebug mojo on your main page to see how you got your header image to the size that it is. If I read the code correctly, it looks like you have a Feature Box. When I go into Thesis to activate a Feature Box I get a message that says that there isn’t really anything I can do with it ……”Right now, the only thing you can do with your shiny new feature box is access a hook, thesis_hook_feature_box. Expect your display options to improve dramatically in a future release!”.

    What I am trying to replicate in Thesis is the exact look of the following website (which is easy with HTML and CSS):

    http://www.financethedream.com which has a full width header and repeating image and the nav menu underneath. I am currently rebuilding this site with Thesis (presently, you cannot see the build externally due to a .htaccess file serving up HTML before PHP)

    So you don’t think I am lazy, I rolled on over to DIYThemes and located the hooks to have the Nav Menu appear under the header but that still doesn’t explain how to get the Feature Box of the appropriate size, location and to include the full width repeating image.

    What is the ancient Chinese secret to be able to do this in Thesis?

    The reason for trying to replicate is because, due to the type of business it is and the inherent lack of professional web sites, we get mad props based on the elegance of the design and inherent professional look . This translates into quantifiable dollars and helps with reputation management because we don’t appear to be ham and eggers.

    Also, is there/are there any books that aren’t outdated that you recommend to get someone up to speed on PHP and hooks?

    Again, any guidance is greatly appreciated.

  77. Vincent — The feature box doesn’t really factor into that sort of header. I only use the feature box on the home page, it’s not my real header area. To emulate that site you need a repeatable image to be the background of #header_area and then a main header image. I made an image demo to demonstrate what I mean:

    full-width_header

  79. Kristarella:

    Wow! Thank you again for the superb guidance. There is only one problem since I don’t fully understand the integration of WordPress & Thesis and where everything is supposed to go. It reminds me of that scene in Finding Nemo:

    Marlin: It’s like he’s trying to speak to me, I know it.
    [to Squirt]
    Marlin: Look, you’re really cute, but I can’t understand what you’re saying. Say the first thing again.

    You are speaking perfect English, but I don’t have your skill level yet. I am a little confused as to where the code goes since the current Thesis headers are fed through Custom_Functions.php

    Is that where this code would go or does it go in custom.css or layout.css?

    Am I leaving the existing code for the header (the house and stars) in Custom_Functions.php or does it go somewhere else with your schema? And is there different code to serve up the header image?

    Thesis and WordPress are great but sometimes they make me want to bend steel at the ridiculous complexity for things that are so easy in HTML/CSS.

    Of course, everything is easy when you understand it. Are you aware of anything that diagrams which file does what, e.g., custom_functions.php serves up the header image but custom.css specifies the width and padding but layout.css specifies changes to the CSS that overrides custom.css (I learned this yesterday thanks to your Firebug tutorial when I couldn’t get one of the headers to display at full width despite changing custom.css, a prior programmer had changed layout.css without telling me and I had to go find the change and correct it so custom.css would display the header correctly)???

    I am going to go through the two tutorials you recommended.

    Anyway, I am not trying to wear you out. You provide an unbelievable and invaluable resource and your time and thoughts are appreciated.

  80. Hi Kristarella,

    Do you know if I can make custom headers for each individual page in thesis? I would like to have a seperate header at the top of every page to make the pages unique. Is this possible? I have beem searching for days to figure it out.

  81. Vincent — It doesn’t really matter whether the header code for the house bit goes in custom_functions.php or custom.css, as long as it works. The current method you’re using with custom_functions.php is fine, if you want to isolate the header changes to CSS you could instead do a image replacement on the default header with CSS like the ones in my CSS custom headers post.
    A hint for determining if provided code goes in custom.css or not is if it starts with .custom and uses CSS syntax then it goes in custom.css. If you’re trying to insert HTML onto the page you need custom_functions.php.

    I don’t know of any diagrams or anything that explains the usage of these files, although these articles in the Thesis user manual might help, Customising Thesis with Custom.css and customising with theme hooks.

    Nothing in layout.css should be over-riding custom.css if you have .custom in front of the selector in custom.css, unless there’s something with !important in layout.css or if it’s a more specific style. (Article on CSS specificity) Also layout.css shouldn’t be edited directly, it’s for the Design Options to be written to.

    Hope that clarifies things a bit more.

  82. Shannon — I have an article on page specific headers that should help you.

    What were you searching for days using? It’s the first result on Google when searching “thesis page header”. If you were searching the forum I understand, it’s pretty hard to search stuff there.

  83. When I do this , The default header is not getting removed . When i check my code using firebug , I can see two headers . The default header is not getting removed.

    Manish

  84. Manish — It sounds like you might have combined this tutorial with an old one because this tutorial doesn’t add or remove the header at all, it styles the default header while moving the nav menu.

  85. Ok, what am I doing wrong? I inserted the code from your post #77 into the custom.css file. I am testing it on the blog here: http://www.financethedream.com/blog

    I am not getting the repeating image and it appears that I am constrained by a container. The header image appears monstrous though it is the same exact image here: http://www.financethedream.com

    Thesis Design Options indicates the maximum column size is 934 which is what I set it at assuming that it would give me the full page and allow the repeating image.

    Any idea what the secret sauce is to correct this?

  86. Ok, the repeating image now displays. I had the image in /images instead of /custom/images. I reset the content column to 580 and the sidebar to 195. Everything visually is out of whack. Any idea what needs to be done to match the images so we have the seamless image without the black border padding?

    Any guidance is greatly appreciated. We are almost there.

  87. Vincent — I think you’re main problem is padding. You need to remove the padding from the header and then you’ll need a bit of background position tweaking to get the images to line up because they’re not the same height.
    If you’re not using Firebug or Webkit Inspector you definitely should be: https:\/\/”www.”kristarella.blog/2009/02/how-to-use-firebug-for-css/

  88. After trial and error work for the better part of the day, I finally got it lined up. Some of this stuff is finally starting to make a little more sense. Thank you for your help!

    I have a little more work to do but it is starting to take shape.

  89. Hi Kristarella,
    thank you so much for your posts. I’ve recently installed Thesis 1.6 and am customizing currently. I have encountered difficulties with the full-page framework settings. When I set background colors, the main content seems to be “in front of “and unaffected by the background. It’s like the main conent is in a container and isn’t affected. have a look at http://www.piklawgroup.com. Any ideas? I appreciate it.

  91. awesome! Thanks I must have been dozing off looking for the answers through the comments. Mucho appreciado! I’m sure you’ll hear from me again – great work!

  92. Kristarella,

    Thanks for the tutorial. Really cool. I got it to work on a site, but I seem to have a “section of white” in my nav bar that I can’t seem to shake. The website is veritaschristianschool.org.

    Any ideas why this is happening?

    Thanks again.
    Clay

  93. Hey Clay,

    It looks like your background colour in the #menu or #nav_area is set to #ffffff (hard to tell where it is without looking at the css…). Look for a css attribute (in your custom.css file) in one of your menu/navigation tags that says “background: #ffffff;” If you can’t find it, it could also be a system default.

    Either way, you should set the background to your border/button colour, which is #153294. I would try #menu first — just add:

    background: #153294;

    to .custom #menu in your custom.css file (or replace background: #ffffff; if that is the case).

    If that doesn’t work, try it at .custom #nav_menu or other tags that are controlling the menu and navigation bar until you find the right one.

    ~Graham

  94. Thank you for these tutorials – I feel like I’m learning a lot, as I blunder about!

    I’ve got progress with my header and nav bar – but I’m wanting to repeat an image across as the background for the navigation – however its just showing up in one small area (an area that was staying stubbornly blank for a while)

    Here’s the link (just a test page, as I’m learning):
    http://onlinescratchpad.com/thesis/

    and here’s my custom css file – any advice or suggestions would be greatly appreciated.

    /*custom header snippet*/
    .custom #header_area {background:#f9f7e8;}
    .custom #header { background-color: #f9f7e8 ; }
    .custom #header {border-bottom:0;}
    .custom #header { background: url(http://www.onlinescratchpad.co.....achine.png) right no-repeat; }
    .custom #header_area .page {background-color:#f9f7e8;}

    .custom #nav_area {border-bottom:1px solid #7f111c;
    background:url(http://orphicworkshop.com/images/nav_bg.jpg) repeat; background:#7f111c; padding-top:2px;}
    .custom #nav_area .page {background:#7f111c;}
    .custom ul.menu {border-bottom:0; border-color:#7f111c;}
    .custom ul.menu li {border-color:#7f111c; background-color:#7f111c;}
    .custom ul.menu li.current_page_item, .custom ul#tabs li.current-cat {background:#7f111c;}
    ul.menu {background:url(http://orphicworkshop.com/images/nav_bg.jpg) repeat;}

  95. Clay — You need .custom #nav_area .page {background:transparent;} or the blue colour that you’re using both should work.

    Corie — Looks like the image is repeating fine, but it’s covered up by the backgrounds of the nav tabs:

    .custom ul.menu li {border-color:#7f111c; background-color:#7f111c;}
    .custom ul.menu li.current_page_item, .custom ul#tabs li.current-cat {background:#7f111c;}

    You could change those to background:transparent; if you want the image to show through.

  96. Thanks – I’m sure its getting closer, but its not quite there, I’m afraid. The red is still covering up the graphic. I now have:

    /* nav bar color */
    #nav_area.full_width {height:40px; background:url(‘http://orphicworkshop.com/images/nav_bg.jpg’) repeat;}
    .custom #nav_area {border-bottom:0px solid transparent; padding-top:0px;}
    .custom #nav_area .page {background:url(‘http://orphicworkshop.com/images/nav_bg.jpg’) repeat;}
    .custom ul.menu {border-bottom:0px; border-color:transparent; background:transparent;}
    .custom ul.menu li {border-color:transparent; background:transparent;}
    .custom ul.menu li.current_page_item, .custom ul#tabs li.current-cat {background:transparent;}

    Thanks again for your time!

  97. Corie — If you’re using Thesis 1.6 you should use the Design Options as much as possible before using CSS, so forget any border CSS and set the borders to 0 in the Design Options for the Nav. Then, it looks like the link needs the transparent background, not the list item. So, the CSS should look like:

    /* nav bar color */
.custom #nav_area.full_width {height:40px; background:url('http://orphicworkshop.com/images/nav_bg.jpg') repeat; padding-top:0px;}
	.custom #nav_area .page {background:url('http://orphicworkshop.com/images/nav_bg.jpg') repeat;}
	
.custom ul.menu {}
	.custom ul.menu li a {background:transparent;}
	.custom ul.menu li.current a, .custom ul#tabs li.current-cat a {background:transparent;}

  99. Hi I have used your tutorial for a couple sites. So thank you.
    I have no issues with the header and content areas lining up in Firefox, only in IE. In IE, the header appears with the content area background showing up on the right side. If I resize the column widths, setting one 10 px smaller, I can get the background color to go away, but then my header appears too wide for the content. The header image is sized to 900 pixels wide.
    http://www.oneilcreekwinery.com/wordpress/
    Is there an easy solution?

  101. Hey there! How would I add a full width video to a post, with this feature? I saw it done the other day when Chris Pearson was interview by some guy. It looked fantastic!

    Can you give me an idea on how this would be done with something like Vimeo?

  102. Chris — It looks like on that post Pearson is using the Feature Box to present the video and he’s not using the full-width framework, but has padding set to zero for the page. I’m not sure how he’s doing it, whether there’ll be a new feature box thing in 1.7 or whether he’s using his own custom fields. He’s using the feature box for the images on the front page too, so I guess the simplest way to do a similar thing is to activate the feature box and use the thesis_hook_feature_box to add your pictures and videos in. So you could have some default content like a picture in there and then you would specify your videos for each post. E.g.,

    function custom_feature_box() {
	if (is_post('ID'))
		echo 'VIDEO CODE IN HERE';
	else
		echo '<img src="feature_image.jpg" alt="" />';
}
add_action('thesis_hook_feature_box','custom_feature_box');

    You could do it with custom fields too. Not quite as simple, but maybe more future proof coz the video info is stored in the database with the post. You don’t have to have the image as a default in there, but if you don’t you should remove all padding and borders from the feature box so that it’s not obvious when there’s nothing in there.

  103. Hey,
    Thanks for the great reply. Here are the steps I took, but they didn’t work.

    I enabled the feature box and had it placed full width before content and sidebars.

    I then went into the post, added a custom function with thesis_hook_feature_box and then placed the code you provided into the ‘field’ area.

    Hit Save, Refresh, and nothing.

    Here is the code I punched in:

    Please let me know if I’ve tried this correctly.

  104. function custom_feature_box() { if (is_post('ID')) echo '<object width="900" height="506"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9414247&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff7300&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=9414247&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff7300&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="900" height="506"></embed></object>'; else echo '<img src="feature_image.jpg" alt="" />';}add_action('thesis_hook_feature_box','custom_feature_box');

  105. Chris — You need to change ID to the ID of the post and feature_image.jpg to the URL of an actual image. I don’t know what would be going wrong if that code is in custom_functions.php it should work, in some way at least.

    You could try the following to see if the function is working at all.

    function custom_feature_box() {
	echo 'Foobar';
}
add_action('thesis_hook_feature_box','custom_feature_box');

  106. Placed thesis_hook_feature_box in the name and what you have above in the value, still no joy. Thanks for all the help!

  107. Chris — I don’t know what you mean by placing it “in the name”. Copying and pasting the above in custom_functions.php should cause the word “Foobar” to appear in the feature box. If not, there could be a problem with custom_functions.php.

  108. I must be putting it in the wrong place then, because I’m trying to add a custom field on the actual post, not add this to the custom functions.php

  109. Chris — Yep, this has to go in custom_functions.php. What I meant about custom fields was that you might be able to add just the video code as a custom field t the post, but you would still need the function in custom_functions.php to add it to the feature box. The code is a bit more complicated, which is why I didn’t provide it at first. It would be more like the following (if the key of your custom field is “video”):

    function custom_feature_box() {
	global $wp_query;
	$video = get_post_meta($wp_query->post->ID, 'video', false);
	if (is_single() && $video)
		echo $video;
	else
		echo '<img src="feature_image.jpg" alt="" />';
}
add_action('thesis_hook_feature_box','custom_feature_box');

    This will show the video only on the single post page (hopefully). I haven’t tested it though.

  110. You’ve been awesome. I plan on donating after we figure this out.

    So I place this code in the custom_functions.php. Got that.

    A few questions.

    Do I need to add a new one of these for each post?
    Where do I add my ‘video’ code within the code above?
    Must I have an image there? Should it just be a blank image or a 1x1px image?

    I think this will look super slick with what I have planned on my site, so I’m really keen to get it figured out.

    Thanks for all you do.

  111. Chris — The video code doesn’t go in the function anymore, but goes in a custom field in the post with a key of “video”. So, the above function goes in custom_functions.php and then

    <object width="900" height="506">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9414247&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ff7300&fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=9414247&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ff7300&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="900" height="506"></embed>
</object>

    goes in the custom field when editing the post with key of “video” and value of the video code above.

    The function will cause the video to show up when there is a custom field of “video” for the post, otherwise it won’t do anything, so you don’t need a new function for every post, it is automatic.

    You don’t have to have a default image, you can remove the part that says else echo '<img src="feature_image.jpg" alt="" />'; if you want to.

  113. Alright,
    Here’s what I did (and nothing more).

    I added the code to custom_functions.php (above the very threatening line that says I shouldn’t put anything beyond it, unless I want to mess something up).

    I added video as the name and the video code above in the value.

    Here is what came up. It’s progress.

    http://www.flyaoamedia.com/blo.....episode-7/

  114. Chris — Progress indeed! Okie dokie, let’s change every instance of “video” to “feature_video” (in the custom fields and in the get_post_meta call) because it looks like Thesis used to use “video” for the Multimedia Box. And also we need to change the last get_post_meta attribute to “true”.

    So, the function should now be:

    function custom_feature_box() {
	global $wp_query;
	$video = get_post_meta($wp_query->post->ID, 'feature_video', true);
	if (is_single() && $video)
		echo $video;
}
add_action('thesis_hook_feature_box','custom_feature_box');

  115. SICK!

    I got it to work!

    The only thing I need to fix now is the text that is showing up over the top of it, and maybe increase the padding so there’s more of the ‘gray’. Zero padding will work too.

    I’m making the donation now.

    If you have any tips on the above, I’d appreciate it!

  116. Chris — The breadcrumbs are positioned absolutely with CSS 283px from the top of the page. There isn’t a very straight forward way of repositioning them only on pages with videos. I think it would be better to hook them into the top of the content box, rather than after it. I guess that has to do with the Blogussion skin, if that’s what you’re using, or the breadcrumbs plugin.

  118. Kristarella,

    I’m just now getting back to your comment on Jan 27th. Anyway, thanks. Changing the #nav_area .page to transparent worked.

    Clay

  119. Kristarella, I hesitate to ask for your help because you give so much of your time already. But if I don’t ask you, I don’t know where to turn. When I set up my blog several years ago, I did so using the Copyblogger theme, and used your post, on personalising the theme, to get my header set up. It uses a fancy background, and the text stays centred no matter how wide the browser goes, and uses a repeater to full in the full width. I hope I’m making sense.
    I’ve now bought Thesis, and I’m about to implement it on my blog. I’d like to use a similar header image. I’ll remake it. But I want to use the same background which has a stripe of dark blue and one of lime green. I’m open as to whether it is full width, or simply fills the whole of the header area in a page framework, perhaps with a dark background container around a white content area.
    I’m really not sure how to do any of this, however. I know I’m not even explaining this very well.
    Do you know if there is a way to make a header image in photoshop and insert it into the thesis header area so it will fill it, with no white borders?
    Or, if I go the full width route, is there a way to use a repeater to fill up all the white space? The repeater I use at present is just the dark blue with lime green pattern. Of course, I can’t even remember how I achieved the header solution in the copyblogger theme.
    I don’t really want to replicate exactly what I have at present. I actually want to have a dark background container, as a border around the site, and then a header logo that fills all the header area. It seems surprisingly hard to achieve that, from what I’ve attempted so far, which is why I’ve been looking at the full width header route.
    Can you point me in the right direction. Any help or advice you can give is much appreciated.

  120. Simon — To get a header in the full-width framework that is still surrounded with the site background, but without white space on the edges, add the repeating background to .custom #header_area .page and then the header bit that goes on top add to .custom #header. See my full-width framework video for more info.

  121. Thanks, great video, very useful. It seems to play overly fast but that might be a browser or flash glitch. Maybe you just speak very, very quickly!

    Your suggestion works for me.

    My (.custom #header) area sits lower than my (.custom #header_area .page) area. Something is pushing it down but I can’t work out what it is. Where should I start to look?

  122. Thanks Kristarella: watched your excellent video on how to use firebug, and now I think I’m getting there. Good idea, that video šŸ™‚

  123. Darn it – I had it all sorted and done – using a transparency created in photoshop to put my logo over the repeater. It worked in all my browsers on my mac.
    Then I heard that IE doesn’t support transparency. I checked and sure enough, it doesn’t work in IE. I get a nasty blank patch where there should be lovely colour.

  124. Simon — Which version of IE? I believe IE7 and 8 should do transparency (unless there’s something a bit wrong with the javascript rendering of the IE7 install).

    Your two best options (in my opinion) are using javascript to render the image in IE6 or using a GIF with transparent background. I’ve had the most luck with the DD_belatedPNG javascript, and I also have a tutorial for making a GIF of your logo without the dirty edges (since GIFs don’t have alpha transparency, the pixels are either fully opaque or fully transparent). If you follow that GIF tutorial you would place your logo over the repeated background and then use the fuzzy select.

  125. Hi Kristen

    Thanks for this post – very useful – but I’m stuck on a niggly thing … a white gap along the nav menu – screencap at link below:

    http://twitpic.com/18pki4

    I’ve tried setting background colours to things that seem appropriate in Thesis Design Options > Nav Menu to no avail …

    The site is not live, happy to send through code you might need to know šŸ™‚

    Really appreciate any suggestions you might have.

    Thanks
    @noj

  126. noj — Is the gap in the nav menu or the header? Have you tried using the highlighting feature of Firebug to see if any elements are larger than they should be? Is your header background tall enough?
    Sometimes if I have a linked image I find there is extra space below it that I can only get rid of by giving the surrounding div a height, if you’re using an image rather than CSS image replacement for the logo that could be happening.

  127. Thanks Kris – it was in the nav menu .. I fixed it with:

    .custom #nav_area .menu {background:#000000;}

    šŸ™‚

  128. Wow! In the perfect world it would be wayyyyy easier than this to work with the header. ugh. I tried messing with the code once and wrecked the site. a little gun shy to even try. Appreciate the tutorial just wish life was easier

  129. Rod — It depends what you are trying to do. As far as colours go, it’s pretty easy to change the header, it’s 3 lines of CSS right at the start of this tutorial. If you want to do more it takes more effort.

    If you want something really easy then WordPress.org may not be the right thing for you. Over its evolution it has become easier to use and more user friendly, but still has a real sense of DIY. I haven’t used Squarespace, but I get the impression it’s a bit more drag-and-drop than most WordPress themes/sites.

    In the past the problem with WYSIWYG editors and things that makes it easier to change the look of sites has been that they output dirty, unsemantic code: not good for cross-browser compatibility or SEO. The only solution was to code it yourself. That’s changing now, but only gradually, not really at a rate that suits the number of people wanting to run their own site.

  130. I would be so happy if you could add code to this for moving the search box to the nav menu and place it either straight to the next to the nav men or to the far right.

  131. Brian — That would probably be a bit beyond the scope of the post itself and there are other posts on it, but it’s a useful bit of code and most other posts make it more complicated than it needs to be:

    function add_search_nav() {
?>
	<li class="search"><?php thesis_search_form(); ?></li>
<?php
}
add_action('thesis_hook_last_nav_item','add_search_nav');

    That goes in custom_functions.php, and the following in custom.css.

    .custom ul.menu li.search {float:right;}

    You may also need to give the form some margins and padding to sit nicely in the nav bar.

  132. Thank you so much. I know, but really appreciate you taking time to help out within the scope. I’ve been browsing around the web like crazy trying to find out a working solution combining the two. No luck untill you struck. Thanks again!

  133. Kristarella: is it possible to make this kind of full width header clickable? Mine isn’t clickable for some reason. I have the header and strapline set to show in Thesis options but set out the left so they aren’t visible using this code in custom.css:

    .custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

    This technique works with the page framework, but doesn’t appear to with a full-width header. Is there an alternative for making the header clickable? Or have I simply messed something up?

  135. Thanks Kristarella, though that doesn’t seem to work for me for some reason. If I take out the text indent, then the hidden text logo becomes visible again, and then it is clickable (though obviously the whole thing looks a mess). When I send it back off to the left with the -9999 then the header is no longer clickable. The full code I’m using is:


    .custom #header_area {height: 137px; background:url('images/top-rpt.png') repeat; outline: none;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}
    .custom #header_area .page {height: 137px; width: 97.7em; background: url('images/WMT.png') no-repeat; outline: none; }
    .custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
    .custom #header #logo a {width:100%; height:137px;}

  136. Simon — Sorry, you need display:block;, I thought about it and thought I’d typed it, but apparently not. .custom #header #logo a {display:block; width:100%; height:137px;}

  138. Hey Krista,

    Thanks for the quick response. I have used wideget sidebar Text option to function as click able images. However I am struck @ Sidebar1 background and Content background. Is there a way to make them (Sidebar as well as Content )transparent.

  139. Joshua — Assuming you’re using the full-width framework, .custom #content_area .page {background:transparent;} will make the content background transparent.

  142. Hey Krista, I have used the following code to make my header area transparent. But then can I still make it clickable to site url.

    body.custom { background: url(‘../lib/images/images/qm_background1.jpg’) 50% 0 no-repeat;
    }
    /* header BG Image */
    .custom #header {border-bottom:none; height:150px; padding-top:0; padding-bottom:0;}
    .custom #header #logo {display:none;}

    .custom #header_area .page{background:transparent ;
    }
    /* Content Area Transparent */
    .custom #content_area .page {background: transparent;}

    i need to make my header area page clickable !! Any thoughts ??

  145. Hey Kristarella,

    I added the code from 131 for adding a search area in the right hand corner of the navigation bar.
    The problem is that the box is too small (I need at least 30 digits worth of space), too thin and is misaligned with the rest of the nav bar.
    My questions are:
    1. How do I fix the alignment and/or add padding to the search box?
    2. More importantly, how do I replace that with a google custom search box similar to the one you have on your home page (I currently have it as a widget in my sidebar but it takes too much space there)
    3. Can you please refer me to other posts or resources on that topic?!
    Thank you very, very much in advance for your help!!!

  146. Nikola — To fix the alignment etc you need to use CSS to change the padding of the menu item and the search box, and its width I guess. Try the following, play with the numbers until it’s right:

    ul.menu li.search {padding:0.5em 0.5em 0 0;}
  ul.menu li.search input {padding:0.5em 0.25em; width:10em;}

    You might like to try using Firebug to investigate CSS problems like that. And here’s a link to W3 Schools’ info about CSS padding to understand the different ways you can write it out.

    To have a google search box you need to create a Google Custom Search Engine and get the form code from them.

  147. Hi Kristarella,
    Thank you very much for your prompt help answer. The code that you have supplied works great and by playing around a bit I managed to position it on the right of the NavBar.
    Now, I do have Google Custom Search Engine already and I am currently using it in the side bar so what I am trying to figure out is how to replace the default WordPress Search box with the Google Custom Search code which I already have.
    Any ideas?!
    Thanks a million again!

  149. Thanks again!
    It works. The only problem is that now I have the search button to the right of the Google Custom Search box and I do need that button there anymore… How do I get rid of it?!

  152. Hi. I don’t really know what I’m doing, but I tried to follow this tutorial. I was able to do the deader part in the custom.css file. But things went wrong for me in doing the nav bar part in the custom_functions.php file. Now when I go to my site’s address, the site doesn’t come up. Instead I get:

    Parse error: syntax error, unexpected ‘.’ in /home2/georgi15/public_html/barashlegal.com/wp-content/themes/thesis_17/custom/custom_functions.php on line 68.

    Any way you can tell what I did wrong? Thank you so much. (At first I could get back in the file and I think I removed the code, but now I can’t get anything by the parse error message. )

  154. Jon — The error means that on line 68 of your custom_functions.php file there is a full stop/period that shouldn’t be there (or should have something else before it). In PHP a full stop can have special meanings depending on where it is.

    Beyond that I can’t tell you what the problem is, but if you copy your custom_functions.php file to Pastebin and give me the link I can try to troubleshoot it for you.

  155. Hi Kristarella – I’m working on a site header and have run into a snag. Was hoping you might be able to offer some advice. I added the code you suggest for the full nav and header. Works fine except for a white area in the nav bar that I can’t get rid of/change the color of. The code is below, and the site is: http://healthconvo.com. Any thoughts? Appreciate it!!

    .custom #header_area {background:#ffffff;
    border-bottom: solid 10px #669682;
    border-left: solid 0px #000000;
    border-right: solid 0px #000000;
    border-top: solid 0px #000000;
    font: normal ‘Arial’, Times, serif;
    letter-spacing: 0.4em;
    margin: 0;
    }
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}
    .custom #nav_area {background:#E6DEC0; border-bottom:1px solid #DBD4B7; padding-top:10px;}
    .custom ul#tabs {border-bottom:0; border-color:#ffffff;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#000000;}

  158. Hi Kristarella,

    Your information has been very helpful. I’m using a Thesis template for the first time. I have a question. I downloaded the OpenHooks plug in. I would like to add an image underneath the header. When I put the code in the plug in, it shows the code on the home page. Do you have any suggestions?

    Thank you,
    Bonnie

  159. Bonnie — It’s hard to say just from a description, I’m not sure which code you are using… to add an image below the header with OpenHook you should be able to add just <img src="http://www.example.com/image.jpg" alt="" /> to the thesis_hook_after_title box. If there is code showing up on your page I would imagine it’s because you’ve pasted PHP in there without checking “execute PHP in this hook” option, or your HTML entities are encoded.

  161. Wow… The tutorial is great and worked like a charm! I just have one question…

    WHEN ARE YOU GOING TO MAKE A TUTORIAL ON HOW TO DO A NAV MENU LIKE YOU DID!

    I have been looking forever to try and find someone who has done the look you did, because I wanted something similar on my site.

    Now I have, but it seems a little to complicated to decode using firebug, put it all together and then apply it to my site. I am just not at that coding level yet.

    Please let me know, I need to know! LOL

    Thanks,
    Brandon

  163. Hi Kristarella,

    I was wondering if you could help me with a problem I’m having. I keep getting the background color of the page in my navigation bar. I would like to get rid of white bar and let the tan full frame header show through. Here is a link to my site. I just bought thesis and I’m trying to get the hang of it.

    http://shawnherbertdesign.com/practice/

  164. Hi Kristarella,

    I figured out my problem. You have a great site! Can you tell me how you made your header have a cool gradient with the knockout text.

    Thanks, Shawn

  166. Hi Kristarella,

    I added the code in Step 2 (with a change to the color), and the background is now full width but the rest is not. Any suggestions?

    Also, how do I change the text in the header?

    Thanks,
    Susan

  167. Susan — I’m not sure what you are looking for in terms of “the rest” being full-width.

    The header text shows the title of the site and the description/tagline as set in WordPress Settings > General. You can select whether to show both, either or neither of these in the Thesis Site Options. To change the entire contents of the header you need a custom function such as:

    function custom_header() {
	if (is_home())
		echo '<h1 id="logo"><a href="/">My custom header text</a></h1>';
	else
		echo '<p id="logo"><a href="/">My custom header text</a></p>';
}
remove_action('thesis_hook_header','thesis_default_header');
add_action('thesis_hook_header','custom_header');

  169. Hey Kristarella,

    Can you explain to me how I would go about switching the header and nav content. I would like the nav content to come first before the header. Would you be able to explain that to me?

    Thanks, Shawn

  171. Shawn — It says it in the post, but you need to use thesis_hook_before_html instead of thesis_hook_before_content_area to add the full-width nav above the header.

  172. Hi Kristarella

    I would like to know what do I need to do in order to make my header look a like
    http://amanda-marie.com I would like my top menu to blend in with the background as well as my logo and bottom menu. My logo is getting cut-off and stretches only as far as the sides of the menus.

  173. Ejaz — From what I can see on your site you haven’t implemented anything from this tutorial. Almost everything you need is in the post. Feel free to ask follow-up questions when you’ve attempted to apply the information in the post to what you’re trying to do.

  174. In making my header full-width, I see from the code you gave it fills in on either side of my banner with the chosen color. Is there a way to do this using a gradient or pattern instead? I’m assuming there is because the header on this site is done like that, i.e. it’s not a flat color. I’m not up on php or css so it may be simple but I wouldn’t know.

  175. Jan — To add a pattern or gradient you can add a CSS background image as well as colour. For a gradient the image you should use the repeat-x property to get it to repeat horizontally, for a seamless pattern you can just use repeat and it will fill the area.

  176. I got onto this today by fooling around. I keep a test installation of WP and Thesis for my experiments. I think I’d lose all my website visitors if I tried any of this live. I made the header as a gif, and then added a link to a small square of the same pattern (instead of plain color) to fill in the full-width. It worked alright but I don’t know if it’s the ‘correct’ method.

  178. Now that I’ve got that down, my imagination is going a little wilder. Is there any way to make a single image go full-width? It seems I have to fill the space with either a flat-color, a pattern or a gradient. I’ve seen some sites where an image goes to one side or the other, or extends down below the header area. It looks very ‘free-form’ but I’m sure it takes some planning.

  179. Jan — unless you make the image as wide as the largest monitor you can’t guarantee a full-width background with a single image. There may be ways to make it appear like one image when it’s actually two. If you give me examples I could have a look and see how those sites do it.

  180. There was an example given by one of your commenters but I’d have to go through all your tutorials to find it again. It was a yellowish background with a tree on the right side and the yellow background extended a ways down the left side of the content area. It looked very complicated to accomplish.

    I think with my paltry skill-set I can still be creative enough custom-designing a header with text and images on top of a background pattern. The possibilities seem endless. I stayed up late looking around to see what other people are doing and didn’t come across anything that I could show you as an example,so perhaps it’s not being done as much as I imagined.

    A simpler place to start might be how to put, for instance, RSS and RSS Email buttons on top of the header and, of course, still be clickable? As I look around at other sites, I’m taking note of things I might want to incorporate.

  181. Jan — I went through all the commenters’ sites, but didn’t see anything matching your description, but I did demonstrate how you can create a single image illusion is comment 77. šŸ™‚

  182. Thanks. I can see how that would work with a certain type of image so I’ll have to think about using a different photo or graphic in the middle. I ended up doing a vignette (that only looked good in white) to get rid of the squared off edges of the banner, so I had to create the full width effect using the navbar. It’s cold looking (for a casual friendly blog) with all that white but I’ll work on it again probably. Another late-at-night in this part of the world.

  184. Hi – Thanks for putting this up, your instructions are very clear. Unfortunately I tried doing this on a WordPress 3.0 blog and while the first half worked well (putting the full sized header in) the second half (putting a full sized nav bar below the header) crashed my blog twice in a row. I cut and pasted the code you have above and made sure they were in the right files after it crashed the first time, but I got the white screen of death both times.
    I can’t even find the files on my FTP site to edit with dreamweaver, so I’m going to have to do a clean install of Thesis again…but I won’t be trying to put in the header until I talk to you.
    Thanks.

  185. Steve — I’m sure all the code in the post works. Make sure you only post the PHP bits in custom_functions.php (the first chunk of code under step 2), and not the CSS (the second and last bits of code are CSS and need to go in custom.css). I would generally recommend avoiding using the built in editor to edit custom_functions.php, but rather using a text editor on your computer and uploading via FTP, or at least having the FTP handy in case something goes wrong. It’s easy — even for me — to forget a semicolon or something and get the white screen, so that even the dashboard can’t be accessed.

    Out of curiosity, how will you reinstall Thesis if you can’t find custom_functions.php via FTP? It’s in the Thesis custom folder, and won’t you need to be able to find the Thesis folder via FTP to reinstall it?

  186. I believe I followed your very clear instructions for a full-width header, yet I don’t seem to have one. Where did I go wrong?

  187. Sonster — If you mean on the GaGa sisterhood site, you would need to give #header_area a background colour that’s different from the body background colour to make it appear full-width. If you mean on another site, then I have no idea where it could have gone wrong.

  190. Thanks so much for your excellent help. I’m now a subscriber and a follower.

  191. Hi Kristerella – try to implement your code for the full width nav bar (as above) with Thesis 1.7. It doesnt work. I get thiserror message: “Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ā€˜full_width_navā€™ was given in /www/htdocs/w00ba1bb/UPR/wp-includes/plugin.php on line 339?. I have checkd the code for spelling mistakes and the right position in the right files.
    Even if I do not make use of the “full_width_nav” function, colors for the “#header_area” do not show up. I am not really familiar with using Thesis – but this looks like getting into coding very deeply; actually my goal is publishing content – if I can get the layout done… Would you suggest to go back to an earlier version of Thesis? Any hints are more than welcome! IĀ“ve also found these functions on “artofblog.com” – but this doesnĀ“t work either. Hope you find the time to give a hint. Thank you!

  192. Mario — I don’t think the version of Thesis will make any difference in this situation. This code does work. I just pasted the first chunk of code in step 2 into custom_functions.php and the second bit in step 2 into custom.css of a Thesis 1.7/WP 3.0 install and all worked as expected, no errors.

    It’s possible that you have a plugin that is duplicating the function name full_width_nav, or interrupting it in some way, in which case changing both instances of “full_width_nav” to “custom_thesis_nav”, or something like that might help. If not, please paste your whole custom_functions.php into a pastebin so that I can check for errors.

  193. Hello Kristarella, thank you very much for the unbelievable fast reply. I hate to say that, but “shame on me”! Your suggestions where the reason IĀ“ve tested what you have written, and by doing that, going through the code of both files again and again. Long story short: Your code works! After rearranging some of the commands I realized I had deleted a character which commented out some text in the “custom_functions.php” . That caused the error message. Really own you a favour. Thank you very much for being so supportive! You have a new regular follower of your Blog – have a nice day!.

  195. Hi Kristarella – You have some wonderful tutorials here, but I am stuck on this one. I somehow have two navbars. The one I made with your help that spans across my page (THANK YOU), and my old one. I can’t find the old code to get rid of it. Do you know how I can go to only one?

    Thanks for the great tutorial.

  196. Sheri — Can’t see your site at the moment due to a PHP error (which I believe is caused by you having two functions named “custom_footer” in you custom_functions.php file). To get rid of the other nav bar make sure you have the line remove_action('thesis_hook_before_header','thesis_nav_bar'); somewhere in custom_functions.php, and if you have Thesis OpenHook installed, make sure no checkboxes are checked that are adding the nav bar in somewhere and make sure the nav function (thesis_nav_bar();) is not being called somewhere in OpenHook.

  197. Hi Kristarella – I moved on to my footer and was called away when my daughter began drawing on my couch – lol. I have it back up. Would I know if I had OpenHook installed (very new to WP and Thesis, sorry)

  198. Sheri — OpenHook is a plugin, you would have to install it, unless someone else is using your site too and didn’t tell you you should know about it. Now that I see it, the line you will most likely need to remove from custom_functions.php is actually add_action('thesis_hook_after_header','thesis_nav_menu');.

  199. Thanks Kristarella – I figured it out. I put the add_action(‘thesis_hook_after_header’,’thesis_nav_menu’); in the functions.php folder by mistake and forgot to remove it.

  200. I’m having trouble with my nav bar. I want it to fit to the content rather than stretching across the screen, and I want it to be beside the title. Nothing I do seems to be working and the nav bar is stretching off the screen. Thank you very much!

    http://www.thehorseandhabit.com

  201. Hi all.

    Sorry, this is not exactly on-topic for “full width headers”, but it’s related so I hope I’ll be forgiven.

    WordPress 3.0 – Thesis 1.7.

    My dilemma is how to determine the exact width to make a header graphic, so it neatly fits the width of the blog.

    For example, let’s say I’m using a two column design, content=500 and sidebar=420. What I need to know is:

    Is there a rule of thumb for an amount to add to the sum of the column widths, in order to determine the resulting blog width? Just adding 500+420=920 leaves the graphic not wide enough, so apparently there has to be an allowance added for whitespace.

    If it matters, I have the following settings…

    Design Options –> Site Layout –> HTML Framework
    “Full-width framework” selected.

    Site Options –> Display Options –> Header
    “Show site name in header” is checked.
    “Show site tagline in header” is checked.

    Thanks for any help you can give.

  202. Gail — Each column width set in the Design Options is the usable width of that area, then there’s padding and margins as well. So, with your settings, posts can have contents up to 500px wide and widgets can have contents up to 420px wide, then there’s the padding around those things. I believe the padding is affected by the font size for the site (the first font-size thing on the design options page, which is 14px by default). At the default 14px font size each sidebar has 1.1em (11px) padding on either side, so one single sidebar set to 420px will be 442px wide. The posts have 1.1em on the left and 2.3em on the right, so the total for 500px contents will be 524px. There are no other margins or padding except for the outer page padding, so the width of your header should be content + 34px + sidebar + 22px.

    The other way to find out is to use Firebug, or if you use Chrome or Safari you can use webkit inspector (right click on the page and select “Inspect Element”), both have a “layout” or “metrics” dialogue showing the width and padding of the selected element. Below is a screenshot of Webkit Inspector, looking at my site’s header metrics.

    kristarella.blog-Metrics

  205. Thank you very much Kristarella, for the great info on working out page widths.I’m not quite there yet, as it doesn’t seem to be exactly right to a very critical eye, but it’s certainly very close and I think you’ve put me on the right track. I’m still trying to get my head around how to use Firebug properly.

    I think it’s just great how you go out of your way to help us novices. Your knowledge of this topic is quite astounding!!!

  206. If it’s not out of order, there’s something else I haven’t been able to get a clear answer to via Google searches.

    Is it possible to have different Media Box contents on different pages, or even no Media Box on selected pages?

    For the site I’m working on I want to have a short movie in the Media Box on the home page, but I don’t want it to appear repeatedly on every page. It would be really excellent to be able to have various different Media Box content on various different pages.

  207. Gail — It is possible to have different content in the multimedia box on different pages by adding the image URL, or video code, or whatever is needed in the Multimedia Box field on the post or page editing page. However, I don’t think there’s a way to have it showing only on the home page and not any other pages. I.e., it’s possible to have it not show up at all and then show custom content for certain pages, or have it show the same thing on every page, except when custom content is specified and then it’ll show that. I think it would be simplest in your case to select “do not show box” and then add it to the homepage via custom_functions.php.

    To do so, try adding the video to the MMbox, copy the code that is generated (for the whole box) when you view the page (either right click and inspect element, or view source, to get the HTML) then put it in a function like

    function home_mm_box() {
  if(is_home()) {
?>
COPIED HTML GOES HERE

  208. Hi there!
    Great blog – I have a really silly question.
    I have instructions about how to do a custom photo header. Here’s step 1.
    1. Open a new blank document in the size of your header area (use 72dpi for web resolution)
    I have thesis 1.5.1 on my site. How do I determine the size of my header area? Thank you.

  210. Thanks Kristarella for making that video on using the full width framework. It was needed.
    But got a question how are you using to firebug to make those changes permanent? Are you using a text editor or are you going into the files inside your server and making the changes. I am trying to learn web development and this has helped.

  211. I’m wondering how I could go about adding a stripe to my header background color that would span the entire width of the full width framework. I have it part of my current logo (green stripe), but would like it better if it was part of the background and across the whole width. I hope that makes sense.

    Thanks for all the great information.

  212. C. Gene — I think I mentioned in the video that the changes in Firebug are temporary so you need to duplicate them in your CSS file. That can either be done by changing a local copy of the file and uploading it via FTP, or by using the built in file editor in Thesis. I prefer the former because you can always undo changes you make on a local file while it’s still open, but not when you edit directly on the server. Theres no other big trick to transferring the changes from Firebug to the file, I generally just type them out in the CSS file. Some text editors might have autocomplete for CSS properties, which makes it a bit quicker to type CSS (I use Coda for that).

    Sarah — For your header I think the best way would be to cut off a sliver of the header image from the side and save it as another image then apply that as a background to #header_area with the background repeat set to repeat-x. Then you should get the blue/green/blue stripes repeated across.

  214. First, thank you for all of your excellent tutorials, you’re amazing. I have a few questions. (I’ve been “out of Thesis practice for a few months, so this may be a simple issue)
    1. my nav bar doesn’t seem to stretch the width of the screen even though I believe I have all the code in correctly. I notice that your nav&header go on forever if I zoom out mine are not doing that.
    2. I’d LOVE to add a medium brown line above and below the nav bar, is there an easy way to do this?

  215. Donna — Your background colours are not applied to any of the full-width elements on the page. Following the steps in this tutorial should produce what you need.

    And once you’ve done that, add border:solid #530; border-width:2px 0; to the CSS for #nav_area to get top and bottom borders on the full-width nav.

  216. Hi Kristarella and other folks.

    WordPress 2.8.5 + Thesis 1.6

    I’ve been sitting here wracking my little brain for an hour and groping around inside WordPress/Thesis configuration and I just can’t find what I’m looking for.

    My default layout is three column, but some time back I set up some static Pages (About, Contact, Privacy Policy etc.) that had no side columns and a few other bits different.

    Now I can’t for the life of me remember how I did that, but I’m fairly certain I didn’t get involved with Custom Page Templates or anything techo like that.

    I’ve got it in my head that there is somewhere I can change such layout/appearance settings for each individual page.

    Can someone please give me a kick start?

    TIA

    – Rosie

  217. Rosie — For starters, upgrade WordPress! Staying on old versions of WP is a security risk.

    As for the no sidebars, you can do that by selecting the No Sidebars page template on the right hand side of the page editing screen. If there are no page templates in the dropdown box activate the default WP theme and then reactivate Thesis, they will show up then.

  218. OK Kristarella, you badgered me into it šŸ™‚

    I’ve been hesitant to upgrade for fear of losing my customizations. But I needn’t have worried because after upgrading both WordPress to 3.0.1 and Thesis to 1.7 everything seems to have come out just fine.

    And after the upgrade the No Sidebars template appeared where you said it would.

    Thanks VERY much your assistance. Fantastic job you are doing here. Might be time for a Kristarella Forum ???

    Hugs,
    – Rosie

  219. Rosie — Glad the upgrades went smoothly šŸ™‚

    I’ve thought about a forum before, but I can’t keep up with my email at the moment, let alone a forum. Will just have to stick with the DIYthemes forum I think šŸ˜‰

  220. Hi
    Thank you for all the great work you have been doing here ..
    I want to extend the green bar in the nav menu to the full extent on the browser.keeping the menu items in line with the content .
    Tried with all the code available on full width frame work.
    Can you please help me out …

    Regards
    Navin

  221. Navin — This tutorial should let you do exactly that. If you can tell me how it didn’t work when you tried it then maybe I can help you fix that. But my instructions on doing it from scratch are already in the blog post above.

  222. Hi Kristarella, can you teach me how to put my header image just on the right site. So half of the header will be for the image on the right side . Thanks Filipe

  226. Darren — Do you mean change the text inside the box? Because it already says “To search, type and hit enter”. To change it use the following filter in custom_functions.php.

    function custom_search_value($value) {
	$value = 'Search site';
	return $value;
}
add_filter('thesis_search_form_value','custom_search_value');

  227. Dear K.,

    I know you must be sick to death of people who don’t get this, but I’m still unable to properly position my 1070×166 .png banner in the full-width framework. It keeps aligning at the left with the title/logo area. Here’s what I have in custom css now (the test site is on a local host or I’d post a link to it):

    /*custom header background */
    .custom #header_area {background:#ABD150;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}

    /* trying to put on the full width banner */
    .custom #header {
    position: relative;
    height: 166px;
    padding: 0;
    border:none;
    margin: 0 0 1em 0;
    background: url(images/menpla_header.png) 100% 100% no-repeat;
    }

    .custom #header #tagline {
    text-indent:-9999px;
    width:1px;
    height:1px;
    display:hidden;
    }

    /* changing page color */
    .custom #content_box {background-color: #abd150; }
    .custom #content {background-color: #248d82;}
    .custom .full_width > .page {
    background:none repeat scroll 0 0 #ABD150;
    }

    .custom .full_width .page {
    margin:0 auto;
    padding-left:0;
    padding-right:0;
    width:89.8em;
    }
    /* removing borders from widget box */
    .custom li.widget .widget_box {
    background:none repeat scroll 0 0 #ABD150;
    border-color:#ADDDE6;
    border-style:none;
    }

    No doubt I’m missing something painfully simple. In any event, thanks for all the great tutorials.

  230. Hi Kristarella,

    Used your great advice to ad search function to nav, but now I am using the wordpress 3.0 nav so I can easily make sub-categories for the nav bar. Is there a way to add the search function to the WP 3.0 nav bar?

    Thanks! -Darren

  231. Darren — Unfortunately I had to rewrite the search bar code a little bit, because of the way the WordPress menu filters work I couldn’t just use thesis_search_form();, but it is possible to do what you’re asking:

    function add_search_wp_menu($items) {
	$field_value = apply_filters('thesis_search_form_value', __('To search, type and hit enter', 'thesis'));
	$search = '<form method="get" class="search_form" action="'.get_bloginfo('home').'/"><input class="text_input" type="text" value="'.$field_value.'" name="s" id="s" onfocus="if (this.value == \''.$field_value.'\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \''.$field_value.'\';}" /><input type="hidden" id="searchsubmit" value="Search" /></form>';
	$items .= '<li class="menu-item search">'.$search.'</li>';
	
	return $items;
}
add_filter('wp_nav_menu_items','add_search_wp_menu');

  232. Hi Kristarella,

    I followed the tutorial above and was able to get the header
    and nav br done. My question is I am using Theisis 1.8
    I had a costume header design done and do not know
    how to make it expand the full width of the screen when
    I upload it under design options.

  233. Vincent — Many header image styles won’t be suitable for full-width. They either need to blend out to a plain colour at the ends or fit in with a repeatable image like the example in comment 77.
    The header upload tool will only add the image to the header (not the page, or the full-width #header_area) so it won’t ever be wider than the header. If you need it to be then you need to use CSS.

    If you’re referring to the Doing4Self header, that should work with full-width because most of the edges go to black. You can use the header upload tool and set your framework to full-width and set the background for .custom #header_area and .custom #header_area .page to black.

  235. Hi all.

    Latest WordPress & Thesis theme.

    I have a Content Column and two sidebars to the right of it.

    I want to place a message at the top of the Content Column, but ONLY on the homepage.

    I do NOT want the message to be above the sidebars as well — just at the very top of the Content column ONLY.

    I have tried to do the above using the thesis OpenHook plug-in but haven’t been able to position the message as described.

    Any suggestions most welcome.

    TIA

    – Rosie

  236. Rosie you need to wrap your code in a Conditional Tag. E.g.,

    <?php if (is_home()) { ?>
<p>My custom message</p>
<?php } ?>

    That should go in the Before Content box of open hook, or if that doesn’t work you might need to add it as a function in custom_functions.php and hook it into thesis_hook_before_content.

  237. Hi Kristarella.

    Thanks very much for the prompt response.

    In the “Before Content” box of OpenHook I wrapped the HTML code that I wanted to insert just as you said, and that has solved part of the problem – my custom bit of HTML is now only appearing on the homepage.

    However, it is still appearing above both the Content column and the two Sidebars. Ideally I want it to appear just at the top of the Content column, above the headline of the most recent post. As you will be aware, using thesis_hook_before_headline places it before all headline posts on that page.

    Any ideas?

  240. Hi Kristarella,

    I am having some real trouble with the full width frame work. I want to basically have a background image behind my site logo, (which is currently working) and then wrap around the outside of the header, and down by the sidebar.

    I wanted to make the background of these blank side areas a transparent element which means the header image can be seen to the right. My overall goal is to also include a css3 style radius curve to make it look fantastic!

    You can take a look a the website in my name!

  241. Oliver — Are you still having trouble with it? I’m not sure I really know what you’re talking about from the description, but it looks like it might be working on your site.

  242. Hey,

    Yeah I finally got it working, I ended up putting a gradient on the image though. I just had to play around in the CSS for a few hours!

  244. Hi! Thank you for the great tutorial.

    I do have one question. I have the menubar integration and when I add the hook for the full width nav area, the menubar integration is broken. I’m assuming that because we’re calling the full width nav, then the name of the menubar needs to change. Before changing it to full width nav, the menubar had to be named thesis-nav. Any idea what should be used after moving to full width?

    thanks in advance!
    Dave

  245. Dave — I don’t know anything about those menubar plugins. My main recommendation would be to upgrade to WordPress 3, Thesis 1.8, discard those plugins and use the WordPress 3.0 menu system, which is supported in Thesis 1.8 and will work with the full-width nav just fine. The Thesis menubar plugin site says that the plugin shouldn’t be necessary with Thesis 1.8.

  246. Hi Krystarella,

    First of thank you for giving me some hope!… I would like to change the header image of my website page to page… (To have different header images on different pages…)

    Could you please kindly tell me how to do this with Thesis please?

    Thank you so much in advance!
    Kumanga x

  248. Thanks, Kristarella. I am up-to-date on the latest Thesis and WordPress versions and the new version almost does everything. I just didn’t want to have to do a core hack to be able to mix and match the order of pages and categories (i.e. a page link with categories in the drop down or home->page->category->page type order).

    I have ditched the menubar for now. If I ever get the time to tinker with it and figure it out, I’ll post it here :).

    Dave

  249. Dave — Go to Appearance > Menus and create a menu then tell Thesis Site Options to use the WordPress nav. It’s really easy to arrange tabs however you want.

    That’s what I meant about ditching the plugins: they’re no longer necessary because menus are built into WordPress and Thesis will replace its menu with the WordPress one when you tell it to.

  250. Hey K.,

    Can you have a look at this site — http://mendingplace.org/ — and tell me how I can get the middle content column to display at a lower z depth under the header? By playing with z-indexes I can get the header to overlay the content column (and slideshow), but then the content column is also under the lighter green background, so only a thin strip of it shows at the top. In short, I want the zig-zag pattern to continue across the content column. That make sense?

    I finally donated to your site, btw. Whether or not you have an answer to this, I appreciate all your great advice.

  251. Dave — Try this.

    .custom {position:relative; z-index:0;}
.custom #header_area {position:relative; z-index:2;}
.custom #content_area {position:relative; z-index:1;}

    Should work fine in all good browsers and hopefully IE too, but double check IE coz it’s weird with z-indexes.

  253. Great article! Is this information still workable with thesis 1.7 and do you have a tutorial on how to do this with other wordpress themes also?

  254. Susan — Yes, this works with versions 1.5 to 1.8 of Thesis (and probably future versions indefinitely). I don’t have a tutorial for other themes. It would vary somewhat with every single theme out there. The general principle is that you need one div that has a width of 100% and then another one inside it with a fixed width (usually between 600 and 1024px) that has side margins set to “auto” so that it is centered in the browser. The 100% div gets the background colour and the center div contains the content.

  258. Hey Kristarella,

    Have to say all your articles are very helpful… just getting started in CSS etc. myself and with several websites all using Thesis, while it looks okay by default install, ya really need to customize it. And your tutorials are a fantastic help for getting a grip on thesis, its hooks, and CSS.

    Thank you!

  259. Whoa, first of all, thank you for being an important person in my life for the last couple of days šŸ˜€

    Now, I did many things according to what you said. And most of them work. But now I have a problem.

    I want to have a Full width header to be a 2000pixel-wide clickable jpg. If you look at my site, you will see why I want it to be like that (the slanted line). Anyway, I did it all, except that:

    I cannot make the jpg centered
    I cant get rid of that dumb white line of space between the jpg and the navbar.

    Help? šŸ™‚

  260. Bojan — You need to make the image the background of #header_area and make the header link the full size of the header:

    .custom #header_area {background:url(images/header2.jpg) center top no-repeat;}
  .custom #header_area .page {background:transparent; padding:0;}
    .custom #header {padding:0;}
      .custom #header #logo a {display:block; width:100%; height:241px; text-indent:-9999px;}

  261. Hi

    I am using thesis 1.8, and tried to use the code above for full width nav bar but came back with an error message.
    Is the original code still applicable in 1.8?
    Can you please let me know the exact code i should use if im using Thesis open hook? perhaps i will have better luck with that? Sorry still a bit new to it all.

    Thanks
    Gabby

  262. Wow thanks for that quick reply!

    However, that doesnt seem to work! I did get rid of the white line, and the navbar is now just stuck to the top, which is nice, but I still want my header back!

    It seems as if the header_area collapsed!

  263. Gabby — I you’re using Open Hook you need to just paste the following into the Before HTML or Before Content Area box and check the option to execute PHP in that box.

    	<div id="nav_area" class="full_width">
		<div class="page">
			<?php thesis_nav_menu(); ?>
		</div>
	</div>

    Bojan — You need to have the design option to display the title in the header enabled for the CSS I posted to work. And then remove the code you’ve added to add the image in there. Or, since the image seems to be centered properly now, adding CSS to give the #header_area .page the same height as the image, that should fix the white line problem (it’s a weird phenomenon that a linked image has extra space below it).

  264. Hi Kristarella

    Thanks for your help. Now I am getting a double header though and they both still do not go to the edge of my page. are you able to have a look at my site for me and see if you know what i need to do?

    I’d also like to make it about 1 and half times the size it is now. do you know how I do this?

    Thanks!
    Gabby

  265. Gabby — It needs to go in Before Content Area, not just Before Content; if you don’t have that box, see if there’s an update to the Open Hook plugin. And try checking the box under the After Header box to remove the nav bar from that hook.

  266. Wow that worked! I just made the #header_area .page a few pixels smaller, and that did the trick.

    Since I didnt know which box I should tick to make your CSS work, I added an entirely transparent GIF of appropriate height to keep the header from collapsing! šŸ˜€

    Thanks a buuunch!

  267. Hi Kristarella,

    Thanks for the great article. The header width code worked great. The problem I’m having is that when I add the navigation code in functions or in openhook it shows 2 navigation menus on my site. I am using Thesis 1.7 I’ve been tinkering with it for a couple hours and can’t seem to get it to work.

    Thanks in advance!!!

    Bobby

  268. Kristarella,

    If it helps, I do have the following code already added under functions that places the nav below the header:

    /* move the navigation bar below the header */
    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

    Thank you Thank you!

    Bobby

  269. Hi – Sorry.. update šŸ™‚

    I removed the code I mentioned above and replaced it with your code:

    function full_width_nav() { ?>

    <?php }
    remove_action('thesis_hook_before_header', 'thesis_nav_menu');
    add_action('thesis_hook_before_content_area', 'full_width_nav');

    and that worked, accept that my nav doesn't appear to be full width still šŸ™‚
    I'm close though! Sorry for the multiple posts.

    Bobby

  271. Laura — Not sure what you mean. Do you mean the image in the feature box? I’m not sure you can remove the page padding from that exclusively. Let me know what you’re after and I’ll try to give you specifics.

  272. Hi Kristarella,

    Yes, sorry the feature box. I can get it to go to 766 px so it is the same size as the page, but it juts right leaving a gap on the left.

    I made it smaller to give an equal gap on the right, but I would rather it went across without gaps.

  273. Laura — You can’t make the feature box full-width while there’s padding around the page, but you can either create a separate full-width section to use as the feature box, or you can fudge it a bit using relative positioning: something like position:relative; width:100%; padding:1em; left:-1em; will get you close. It’s effectively making the box 100% of the available width, then adds padding, then moves the box to the left of where it would normally start, so that it overlaps the page padding.

  274. I have succeeded somewhat with the full width but I would like the navigation at the top of the page and can’t quite get it to work. Here is my experimentation http://gotobig.net/mcan/

    I changed
    add_action(‘thesis_hook_before_content_area’, ‘full_width_nav’);
    to
    add_action(‘thesis_hook_before_header’, ‘full_width_nav’);

    but that didn’t work. It seems to me I need another wrapper around the nav and then have the page wrapper go 100%? Please any help would be greatly appreciated.

  276. I love your tutorials, but am having a problem. I’m new to Thesis and WordPress. I’m using Thesis 1.8 and WordPress 3.0. I switched my layout from page to full-width. I copied and pasted your code into css and custom_functions files, as instructed, and made necessary changes to the background colors. Now though, neither my logo nor my navigation bars show up. Instead I get an error message similar to the one mentioned earlier in the comments – ‘Waring: call_user_func_array() [function-call-user-func-array]: First argument is expected to be a valid callback, ‘my_custom_thesis_nav’ was given…location is listed. I changed the name of the custom nav menu as instructed above in the comments, but that didn’t help. Any other thoughts on how to potentially resolve this issue?

    Thanks!

    Marian

  277. Hi Kristarella,

    After playing around some more with the code, I finally got the nav menu to show, but I can’t get my logo to show up in the header. I uploaded it in the ‘Header Image’ section within Thesis, but there is no link/url provided to add within your header code information. Also, when I originally had my layout set to page framework and uploaded the logo in the ‘Header Image’ section, there was no problem seeing the image. So I’m not sure what I’m doing wrong. Any ideas?

    Thanks.

    Marian

  278. First, I want to say thank you for such and resourceful and informational tutorial blog! You rock!
    My question is: Do I have to change all my coding as a Pageframework layout to go to Full Width layout?

  279. Hi Kristarella,

    I followed your instructions back in Thesis 1.51 and it worked like a charm.
    I’ve upgraded to Thesis 1.8 and I returned to this page to find how to do it a gain. Your instructions are just what I needed to make a full width header. Thanks again!

  281. Linda — Just to clarify, in case there was some confusion, this tutorial has nothing to do with the header upload feature in Thesis and the header upload feature does not provide full-width headers. The only way it will do so is if the header that you upload to Thesis blends in with the background colour used on #header_area.

    I believe the behaviour of the header image upload is to scale images that are larger than the suitable header size for your Thesis site width, but if the header is smaller than the width then I don’t think it will do anything with it (other than display it).

  282. Thanks for such a quick reply! I’m new to thesis (and, since I’m not a graphic designer, I should probably not even bother). I’m sure it will look just fine using the tutorial above and maybe adjusting the color if necessary. After posting, I realized that your tutorial wasn’t connected to the thesis upload šŸ™‚

    However, I have a question about the following since it’s in Step 2 which is about the custom_functions (and yet it doesn’t seem to be about functions):

    “The rest of the code gives us a nice bit of HTML, similar format to the other full-width areas of Thesis, which we can style with CSS.
    .custom #nav_area {background:#F0ECDB;}
    And hereā€™s just a bit more CSS to make it look prettierā€¦”

    I’ve never used css or custom functions before (and this is also my first use of WordPress), but my impression was that the paragraph was not connected to functions but to the other part (css).

    How can I tell if I made the changes correctly in the editors (other than that I see blue and the header is full width)?

  283. Another question: since “the header upload feature does not provide full-width headers” does that mean that everyone who has modified their site per your instructions above can’t use it except for hoping that the background color matching works? Or, is their another way to use a background image other than the upload feature?

  284. Linda — You’re right, the second part of step 2 is CSS and goes in custom.css, I just didn’t say that as specifically as when I said the first bit goes in custom_functions.php.

    Tizag.com has some good beginners tutorials that may help you identify the different syntax used in HTML, CSS and PHP.

    If the site looks right (and yours does), that’s a good indication that the code is in the right place. One of the other things you can do is edit your files in a text editor that has syntax highlighting on your computer and then either upload the file to Thesis via FTP, or just copy and paste it into the custom file editor when you think it’s right. The syntax highlighting helps visualise code a bit easier. I talked about them a bit in this article on the DIYthemes Thesis blog.

    Regarding the header colour. If you have used a particular colour in #header_area and used the same colour when making your header image, there shouldn’t be much problem matching it. Or you can use a transparent background PNG header image to not worry about the colour behind it, or you can apply header images in multiple ways using CSS.

  285. Thank you so much for your tutorials! I have learned so much about Thesis and WordPress thanks to folks like you who have taken the time to put great tutorials together!

  286. Thanks for all the great tutorials. I am a blogger and by no means a designer. I need to make my header height smaller to match my logo. The colors on the logo don’t exactly match the background colors. can you advise?
    Thanks
    Craig

  287. Craig — There are multiple values that need to be adjusted to change the size of your header, including the height of #header_area2 and the top margin of #logo.

    For the colours, you probably need two images with matching gradients, as demonstrated in comment 77.

  288. When I switched to Full Width I lost the “cool shadow effect” on the content. Is there a way to get that back?

  289. Tim — Not just with the Design Options. You can try with CSS, but you can’t duplicate it exactly because the page structure is different. You can try something like:

    .custom .page {border:solid #ddd; border-width:0 2px;}
.custom #header_area .page {border-width:2px 0 0;}
.custom #footer_area .page {border-width:0 0 2px;}

    Where #ddd is a colour slightly darker than the background colour it will mostly get the effect back.

  292. Kristarella,

    I’ve got an issue and it appears that this site does as well.

    If you narrow the page down until you get a horizontal scroll bar, the full width segments of the header break on the right side.

    Any clue how to fix this?

    The same issue exists on my site as well. Check it out.

    Thanks!
    Rob in Atlanta

    • Hey Rob,

      Yep, I’m aware of the problem. Have been meaning to fix it…

      Figure out what your .page width is either by using Firebug/ Webkit Inspector or looking at layout.css. Let’s say it’s 100em, then you need the following in your custom.css.

      .custom .full_width {width:100%; min-width:100em;}

  293. Kris,

    That fixed it, thank you!

    Instead of using a em value, I used a pixel width (px).

    In Thesis 1.8, you can get the exact width you need from the Thesis>>Header Image section in the WP Control Panel. Just go with the width that shows up as the “optimal header image width.”

    I assume Pearson calculated this one by including ALL the widths, paddings and margins across the entire site. So, all the math is done for you already.

    Works perfectly, Thank you again!!

    Rob in Atlanta

  294. Hello again!

    It’s been a while since my header started working perfectly.

    Or so I thought untill a IE user sent me an email (luckily only 3% of visits are through IE).

    The header is just not there in IE. It must be something simple. I’m using a combination of a transparent gif (to prevent header area from collapsing) and a css assigned background image. Could you firebug it and help?

    Still thankful from last time,
    Bojan

  295. Bojan — Remove the width CSS from .custom #header_area .page, I think IE is taking that and putting the header image way way over to the right because it’s supposed to be centered in a 4000px area (most current displays are somewhere between 1000px & 2000px).

  296. Hey Krista,

    I have decided to come right to the source as many have referred me to your tutorials (You are like the T-rex of thesis tutorials…you rule gurl šŸ™‚ but as a lumbering css/html blockhead I am not fully able to either communicate my message or understand the answers I am getting (btw really impressed that you continue to respond to comments well after the post has been published).

    So here is what I want to do…

    I have a simple banner that I would like to upload and run right across the page just like your banner does (I did read your tutorial on that and realize what I am asking is somewhat different) with no white space.

    But I want to keep my two column set up the same (450 and 150px in size respectively (again much like you have done).

    Is there anyway for me to do this. Here is a test site I’m using where I tossed in an example banner. Thesis has resized it to 759px.

    http://www.becomingdisruptive.com/

    How do I get it to run right across with no white space? and if that can be done, what width would this need to be?

    Any help you could give would be greatly appreciated.

    Little tiny infantile t-rex signing off,

    DD

  297. Dean — You need the following in custom.css:

    .custom #header_area {background:#57A9E1;}
  .custom #header_area .page {background:#57A9E1;}

    Then you may also need the to follow the above for a full-width nav, otherwise it may look a bit odd.

  300. Hello,

    I have my header to be full width, and it looks great AT MY resolution (1600 x 900). However, it doesn’t look so good at lesser resolutions. In short, I was wondering if you had any code to make the header fluid so that it automatically adjusts depending on the browsers resolution. Thanks so much !

  301. Ryan — It depends entirely on how you’re doing it: whether it’s an image and if it’s referenced in CSS, or is in the HTML, or if it’s just the title and a background. And, in what way does it not look good at smaller resolutions?

  302. Thanks for the super-fast response! Sorry, I should have been more clear.

    The code I’m currently using:

    .custom #header_area {display:block; height:262px; width:1580px; background:url(http://mysite.com/wp-content/t.....s/test.jpg); center no-repeat;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}

    The problem, obviously, is that I’m specifying the height and width of my header image. It looks good at 1600 x 900, but when you down to say, 1024 x 768, the header is far too wide, which results in a bit more than half of the header displaying without scrolling to the right.

    I suppose I am looking for code that will automatically resize the header image depending on the browsers resolution.

    Thank you so much for your time!

  303. Ryan — Try this instead:

    .custom #header_area {display:block; height:262px; background:url(http://mysite.com/wp-content/themes/thesis_18/custom/images/test.jpg) center center no-repeat;}
  .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}

    If your header image doesn’t suit that though you can add the image into the header via PHP:

    function custom_header() {
  echo '<p id="logo"><a href="' .  get_bloginfo('url') . '"><img src="/wp-content/themes/thesis_18/custom/images/test.jpg" alt="' . get_the_title() . '" /></a></p>';
}
remove_action('thesis_hook_header','thesis_default_header');
add_action('thesis_hook_header','custom_header');

    And then try this CSS:

    .custom #header #logo img {max-width:100%; width:1580px; height:auto;}

    Apart from those two options you’re probably looking at some kind of javascript option.

  304. Thank you again. The first option did not work.

    I am trying the php now. However, I was wondering what code should be where the broken image is above, if any.

    get_bloginfo(‘url’) ?

    Thank you !

  305. Disregard the above question.

    Last question. Am I placing my url anywhere in that code other than to locate the image? Thank you again !

  306. Ryan — You shouldn’t need to change anything in the above code, unless the URL to the header image that you gave in your example was a fake one. The get_bloginfo('url') gets the site’s URL so that the header image is linked to the home page and the image source URL is the same as the one you gave, except it’s using a shorter URL form (see this reference about absolute and relative URLs).

  307. I want to thank you for your help. None of the above worked, so I redesigned my header to be repeating so that a smaller browser resolution should not appear to be cutting anything off. I’m looking in some javascript as we speak. Thanks again for your help.

  308. Hi kristarella can you help me or give me some guide how to change my header color? and add it some image? please.. I’m a little bit lost in thesis themes..

  310. How do I add a header that is an image file that I created for the full width layout?

  312. Comment 77 is similar to what I’m trying to do with the header. It needs to repeat and cover the entire header area. So, this is all new to me as of today actually. In comment 77, it says to add a repeatable image to the background of # header_area. What file in WordPress do I need to access to make the background repeatable?

    You mention in your example in comment 77 the following: custom#header_area {background:url (images/head_big.jpg) left top repeat-x;}
    Is this the code I should enter to make an image separate from the header image repeat in the background? Specifically.
    Would you explain where to put the code and exactly how it should be coded?

  313. Lisa — It’s essentially exactly the same as the tutorial, but you add an image background rather than a plain colour. So, it goes in custom.css. Then you use the same background image CSS syntax to add the non-repeating image to #header.

  314. My custom.css file is in several places in my root directory. Which do I edit? It shows up in the WordPress files under the “themes” folder as you know, but there are 2 areas that this file is showing up when accessing my ftp area. The first place is in the “Public HTML” folder and another folder called “www” folder.

    I tried finding the custom.css file and when I tried to edit it in my Hostgator admin panel by choosing “code editor” the file is there but faded and I can’t click on any of it to edit. What am I doing wrong? I am getting more and more confused as the day goes on here. Pretend I’m in 5th grade and break the entire process of adding the custom header to the repeat background code. I read your tutorials, but with the extra stuff you gave me last night and today, I’m lost as to what the heck I need to do.

    I already changed my HTML framework in WordPress to full width. What do I do next as far as editing the custom.css file. Yes, I made the sample custom php file “custom” in WordPress, so I can edit custom items.

    Here is the site I’m working on. It’s a terrible mess right now. The header is what I added yesterday and want it to extend the entire top of the website. I have the blue pattern background image, that I can use for the background image for the header in addition to the header image I already uploaded to the custom/image folder in the root directory. http://www.fromgeorgiatogermany.com

    Thanks for any help you can give me.

    By the way, I have Theses 1.8 and want to add an image header in full width that extends on the entire top of the header area.

  315. Since you seem to be the expert, I thought I’d ask.

    Site here:
    krizzydesigns-test.com/test1

    I’d like the blue to show all the way through the header image and buttons (which are in the thesis hook plugin as header).

    I’d love to hear suggestions.

  318. I created a full width nav menu and moved it below the header using your code, but if I try to move it above the header using your code:

    add_action(‘thesis_hook_before_html’, ‘full_width_nav’);

    I get the following error

    Parse error: syntax error, unexpected $end in /home2/journan4/public_html/wp-content/themes/thesis_18/thesis_18/custom/custom_functions.php on line 46

    How else can I add the nav menu above the header?

    Thanks!

  320. Hey Kristarella! Do you mind helping me with something? I did this full width navigation bar and it worked but now I have a duplicate nav bar in the middle of my header!! eek! Any idea how to get rid of it? http://www.myorganizedchaos.net/

  321. Amy — You probably have a line somewhere in your custom_functions.php file that says something like add_action('thesis_hook_header','thesis_nav_menu');, removing that line should fix it.

  322. Hello I have tweeked my code a little bit and got my page to full width or a width that I want. I am having trouble adding a banner that can be found at

    http://www.asiapundits.com/ima.....header.png

    Do you have any suggestions on what I need to do to get this banner working in the header area of my page. I have read Art of Blog’s tutorial on full width but just can’t seem to solve getting the banner within the header. Is my banner too big? Any suggestions?

  324. I need Help no matter what I do I can not insert my logo image in my thesis 1.8 site now that I have it in full width.
    Here is my php and css files let me know what I am doing wrong please. One more thing how can I fix my tabs in the nav menu I added above header? Here is my url
    http://www.consumerrightssolutions.biz
    Thanks,
    Geoff
    /* HEADER ZONE */

    .custom #header_area { background: #213C63; }

    .custom #header_area .page { background: #5684C6; }

    .custom #header { background: #A2BBDF; border-bottom: 0; }

    /* NAVBAR ZONE */

    .custom #nav_area { background: #1D341A; }

    .custom #nav_area .page { background: #589B4D; }

    .custom .menu { background: #E8E88B; border: 0; }

    .custom .menu li.tab a, li.tab { border: 0; }

    /* CONTENT ZONE */

    .custom #content_area { background: #d8d86c; }

    .custom #content_area .page { background: #efef8e; }

    .custom #content_box { background: #E8E88B; }

    /* FOOTER ZONE */

    .custom #footer_area { background: #1D341A; }

    .custom #footer_area .page { background: #589B4D; }

    .custom #footer { border: 0; background: #91C489; }

    /* BEHIND EVERYTHING */

    body.custom { background: #9b1f1f; }

    .custom #container { width: 100%; min-width: 780px; max-width: 1260px; }
    .custom #content_box { background-position: 70% 0; }
    .custom #content { width: 70%; }
    .custom #sidebars { width: 30%; }
    .custom .teasers_box { width: auto; }
    .custom .teaser { width: 48%; }
    .custom #image_box { text-align: center; overflow: hidden; }
    .custom #image_box img { display: inline-block; border: none; background: none; }

    .custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
    .custom #nav_area .page {background:transparent;}
    .custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}

    .

    PHP

    function custom_nav() {

    echo ‘<div id="nav">’;

    echo ‘<div id="nav2">’;

    echo ‘<div class="nav_container">’;
    thesis_nav_menu(); //this is default navigation

    echo ‘</div>’;
    echo ‘</div>’;
    echo ‘</div>’;

    }
    function full_width_nav() { ?>
    <div id="nav_area" class="full_width">
    <div class="page">
    <?php thesis_nav_menu(); ?>
    </div>
    </div>
    <?php }
    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_before_html’, ‘full_width_nav’);

    function topnav_menu() {
    ?>
    <ul id="topnav">
    <li><a href="http://www.consumerrightssolut.....li&gt;
    <li><a href="http://www.consumerrightssolut.....li&gt;
    <li><a href="http://www.consumerrightssolut.....li&gt;
    </ul>
    <?php
    }
    add_action(‘thesis_hook_before_header’, ‘topnav_menu’);

  325. AsiaPundits — Have you figured out the header? Looks like you’ve got the image on your site now?

    Geoffrey — It depends a bit on what kind of image you’re trying to add to the header, but you can try the Header Image uploader in the Thesis menu in the dashboard. Or take a look at my CSS Custom Headers post. Also, try adding class="menu" to the HTML of your topnav and see how that helps it.

  326. Ok thanks I will try that. I have the logo up but in the body it would not work with the Header image uploader. I will check out your CSS post and try adding class=”menu” to the HTML of the topnav. Thanks for the tip. Your tips and advice here has been invaluable Thanks!

  327. Hi Kristarella,

    Thank you for this fantastic tutorial. For months I have been thinking of having a full width header but was frightened to start fiddling with the code in case there was ‘no way back’. However, once I took the plunge and followed your instructions, I am delighted with the results on my blog.

    Thanks again

    Mark Salmon

  328. Hello Kristarella and thank You for this post and all comments!
    But can you explain me how to put full-width nav menu above every thing?
    Something like:
    – full-width menu
    – header
    – content
    – full-width footer!

    I hope You can! Thanks in advice

  329. Excuse me for second post, but must give some explanations!
    This site is designed as I want!

    If you look at the page source first is

    and then

    Can You tell me how to produce same structure, please!

  330. Hi Kristarella,

    You are wonderful. Just fixed a problem I have been struggling with for weeks width your excellent full width nav tut. I join many others who have commented on your incredible detail and dedication in providing these thesis tutorials. wishing you tons of good karma!

    Karma

  333. Hi Kris,

    Looks like I’m late to this party, but still, I thank you for your site and willingness to help us CSS-challenged folk! Adding a full-width header image right in the CSS is the easiest way I’ve found so far. Is it possible to have rotating images using this approach? The only code I’ve seen for rotating images involves using a hook, and to my knowledge there’s no hook for #header_area .page.

    Thanks again, Jon

  334. Jon — You can have rotating images… if you’ve got a single colour or texture for the full-width and then another image on top, you can add the image via PHP like in my page specific headers tutorial and make it rotate from there. If you have a different colour altogether and want it to load randomly every time the page loads you can do that by adding a random class to the body of the page and then using CSS with that class… I did that on SpaceCrazed to rotate through different images in the background. If you look at the page source it’s got a body class of “s58” or something like that, which is the second of the time that you load the page. So it’s not actually random, but appears to be so from the users perspective…

    Anywho, the first way is easier, just depends what you want to do.

  335. Kris – Thanks very much for the response. I’d like the page to load a different image on each load – whether random or rotating, either way. Your PHP method makes sense, and I can easily run the random script in there; it’s just that the hook you use at the end places the image in #header. Is there any way possible to place it in #header_area .page? This is using the full-width framework by the way, although I’m sure you knew that already.

    Thank you once again, J

  338. Alright so maybe I am over complicating things but I want to make the navigation bar and header to be the width of the browser. But I was hoping to essentially make it mimic your site. The content have a fixed centered width and the nav/header be centered to the content.

    I followed the guide, as well as a couple of guides and here is where I am:

    http://www.onebuzzmedia.com

    I am an SEO guy so the coding is newer to me

  342. Hi Kristarella,
    I have a new install of the current WP release and Thesis 1.82. I am trying to follow this tutorial to create a full width header and navbar. The header part works, but I cannot get the navbar to go full width. If I can get some guidance, it would be appreciated.

  343. Update:
    I uninstalled and re installed Thesis.this appears to have fixed my issue.

  344. what if i want to create the full length nav menu ABOVE the header area? For example, my site: http://www.imbibeview.com/ i like how the nav menu is ABOVE the header area, but i just want the nav menu to stretch the length of the page in terms of color scheme (instead of all that white space). thanks a lot – your tutorials are incredibly helpful

    thanks,

    michael

  346. Hi Kristrella,

    I am very new to web design and thesis. I have used some CSS code that I found to customize my navigation bar font but now my navigation bar does not stretch the full length of my header image. Could you please tell me how to ensure that my navigation bar is always the same width as my header image in both IE8 and IE9?
    Thanks,
    Lori

  347. Lori — You need the CSS .custom .menu {background-color:#540303;}. Not sure about the width… is it the same width as the header in any browser? It’s hard to tell what you consider as the same width since there’s a lot of white space in the header. Do you mean the edge of the logo and the edge of the text?

  348. Hi Kristarella,
    Wow, thank you so much!! The navigation bar appears to be fixed, now in order to get everything to line up properly I will need to fix the header because the orange bar that stretches across the bottom is a few pixels short.

    You don’t know how happy this makes me, you have made my week! I wish that I had posted a comment to your site earlier, it could have saved me a few hours. Thank you for your kindness, you are an inspiration.

    Cheers,

    Lori

  349. Kristarella,

    Thank you for openly sharing your Thesis knowledge with the world.

    I have a full width image as my header and it does not render properly when viewed from other computers. I used your tutorial but I’m confused about how to get the header image to expand and contract with various computer screens

    I tried some css but no luck so far.

    Thanks in advance

    Les

  352. Hi Kristarella,
    I just moved all the content from my website to wordpress and all it is left is the design part to fix. I just wonder if all those pieces of code need to be copied and pasted or they need to be adapted for each case? (i don’t know anything about css).
    On my site I have the header composed of 3 images which slide every 2 sec or something like that. Is it possible to do the same on wordpress (of course I have thesis).
    If you need it the site is http://www.sorinmacovei.se to acess the blog just ad “/wordpress”

    Thank you!

  353. Oren — I think the answer is yes, but I don’t think I entirely comprehend what you’re envisioning.

    Sorin — You will need to adapt the code if you don’t want it to look exactly the same as the screenshots…
    Take a look at my article on the DIYthemes blog about CSS. Other good sites for HTML and CSS basics are W3 Schools, Tizag, and HTML Dog.

    To make your header slide you’ll need the code in the header and some javascript that controls it. You can try adapting the header function from https:\/\/”www.”kristarella.blog/2009/08/page-specific-headers-in-thesis/

  354. Thanks for the GREAT post!

    but ah …
    One thing though.

    How can I span the tabs of the menu across the entire width?
    (right now it’s limited by the width of the content of the site.

    Take a look

    http://screencast.com/t/VbhcS3Pqx

    Thanks again.
    YOU ROCK!

  355. Adam — Assuming you’ve got the nav in it’s own full-width div, like in the post, then the CSS #nav_area .page {width:auto;} will probably do it… Keep in mind that people have screen resolutions and browser widths of all kinds, so it can be good to restrict the width to some extent.

  356. Thanks for the quick response!

    Still doesn’t work šŸ™

    When I open firebug and edit the html of the nav_area like this:

    it works like a charm.
    Do you have any idea how to integrate this into thesis?

    Thanks again. Much appreciated šŸ™‚

  357. HI kristi, thanks it works. I was just wondering if I could make the nav full width as well. The challenge is I have a second custom nav cat_nav. Pls how’s I do that?

  358. Adam — The code didn’t come through; you need to encode it via the link below the comment box.

    Victor — There’s code for a full-width nav in the post. To have your main nav full-width above the header and category nav full-width below the header you use the same PHP & HTML structure and duplicate it with different function names and difference IDs, e.g., function full_width_nav() hooked into thesis_hook_before_html and function full_width_cat_nav() into thesis_hook_before_content_area and id="nav_area" and id="cat_nav_area". In your second function, replace <?php thesis_nav_menu(); ?> with your cat menu code.

  359. Hi Krista, I ran into navigation problem after adding the multi-language plugin WPML to one of my sites. Apparently one has to jump through hoops to make wpml wortk with thesis. One solution that seems to have worked is to use the navigo plugin to generate menus. My question is: can I integrate the “if(function exists…)” code below into your full width nav code (which I am already using)? If so, where does it get placed? After this there will be the .css isue (yours or Navigo’s?).

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

    function localized_nav() {
    if(function_exists(‘navigo’)) navigo(‘sort_column=menu_order&level1=menu&level2=child’);
    }

    Many thanks!

  361. I have followed your instructions, code works very well – thank you for great information. I am still tweaking nav area.

    My question is, what code is bringing the content back to a page layout, not fluid?

    So in other words, when staring this process I set the design options to full-width framework which made my site a fluid full-width layout throughout header content and footer.

    Then following your code, my content area is back to my specified width and not fluid as browser window displays.

    Is it within layout css here –
    .full_width #content_box .page { width: auto; }

    Thanks again for a great post.
    _Cindy

  362. Cindy — Thesis is never a fluid layout by default. The content is always centered and has a specific width. I’ve described the full-width layout in a video…
    That particular CSS you reference fixes an issue with any divs inside the content, giving back their normal width so that they don’t get given the width of the outside page wrapping div.
    If you want a liquid layout you will have to use your own custom CSS; I believe there are other tutorials for that.

  363. Kevin — I don’t really know anything about that plugin, but if you only replace thesis_nav_menu(); with if(function_exists(ā€˜navigoā€™)) navigo(ā€˜sort_column=menu_order&level1=menu&level2=childā€™); in the code in the post, then if the navigo generates a list with a class of “menu” like Thesis and WordPress do, then it should all work out without extra CSS.

  364. Thanks for help. Thought I saw page elements expand/contract, but maybe just header, at any rate, I have what I need and thanks for the link.
    _Cindy

  365. Using your tutorial, I had the nav area set as:

    .custom #nav_area {background: transparent;}
    … then changed to the background color I wanted to get the background color to expand the width of the page rather than stopping with last link or nav tab:

    .custom #nav_area {background: transparent;}
    … and I got a background color that bleeds beyond the 2px border I set for the nav bar within Thesis Design Options.

    Instead I have used:
    .custom .menu-main-menu-container {background: #DB6414;} and gotten a similar result.

    Any suggestions on why this “bleed” of about how I am setting the bkgrd color for the nav bar through the menu-main-container?

    Thanks again for this tutoiral, as I can see, a very popular one, too.
    _Cindy

  367. Great tutorial, I have successfully designed my own header via your instruction, great. please take a look if you like, thanks.

  369. I am using the current Thesis and have copied and pasted your posted instructions into my custom.css…but my nav menu still doesn’t go full width. I have played around with a couple different things….I even reset all of my Thesis defaults šŸ™ One of your posters solved this by uninstalling and reinstalling Thesis. I REALLY don’t want to do that…I will loose MANY hours of work if I do that. Help please?

  370. Seriously wishing I could delete that last comment. Haha. Took me awhile, but I realized I wasn’t pasting the appropriate part into the functions file…I was putting everything into the custom.css. SIGH. Oh well, got it now šŸ™‚

  372. Kristarella,
    Dec 20th last year I commented with an issue about color bleeding beyond nav borders… not sure what I meant exactly — too near the holidays. But I believe I hooked my nav bar to thesis_hook_after_header, rather than thesis_hook_before_content_area.

    So I was getting some odd results when using css code….custom #nav_area {background:#acolor;} and too I had borders turned on in Thesis.

    So basically I have correct that issue and now trying to get a border above the nav bar and also one below it.

    The border below should stop at the page border not at the main-menu-container… any help there?

    http://www.ccbcreative.com

    Also while you’re there, I am having an issue styling my top menu I created – would like header color to extend to top of browser to include the top menu. Is this a quick fix?

    _Cindy

    This should do it for me, I hope for a while. I have enjoyed and appreciated tutorials like yours. thanks again.

  373. Do you know how I can get rid of the light gray vertical bar on the right edge of my nav_ menu? It is almost like a border, but it is just on that one edge and about 1px of that same light gray on the bottom edge of the current page tab. I’m thinking I wasn’t quite successful in making my nav_menu tab backgrounds transparent…

  374. Cindy — You can use .custom #nav_menu .page {border:solid #acolor; border-width:2px 0;} and change the color and width to suit you for a border above and below your nav that is as wide as the page.

    I’m not really sure what your issue is with the top menu… The colour does seem to go to the top of the menu.

  375. Luke — If you set the border width to 0 in the Thesis Design Options in the section for the nav colours (second column) that will remove all borders for the nav.

  376. Since implementing the awesome full width changes you’ve outlined, I’ve been struggling to get the coding right to get a search bar in my new nav menu. I’ve tried 6 different tutorials…none of which use anything close to the nav menu modifications you outlined. Could you point me in the right direction to figure this out? Thanks šŸ™‚

  377. So tonight I was finally able to get a decent search form on my page, above my header, and floating to the right. Problem is, I can’t seem to get it in the actual full width nav menu. I can get it above or below it…but not in it. Do you know what I’m missing?

    • Luke — if you’re using the Thesis nav menu you can use this function http://snipplr.com/view/30098/.....hesis-nav/ If you’re using the WordPress nav you can do something similar, but it’s different to hook into that menu. Or you can put the search bar after the menu inside the page div of your full width nav area, and then use this CSS to position.

      #nav_area .page {position:relative;}
      #nav_area .page form {position:absolute; right:0; top:0.5em;}

  378. The first option didn’t work, but the second did. Yay! So now I have a search field about 1.5 inches wide, but I cannot click into the field unless my cursor is in the right 1/4 inch or so. The rest of the field is unresponsive to my mouse.

    When the search form is in it’s own line below my nav menu, the entire field is accessable/clickable. Any ideas?

  380. I’m using the WordPress menu system. What would the “its different to hook into that menu” be? I think I’d rather try that method to see if that works.

  381. Hi Kristarella

    .custom #header_area .page {background:transparent;} battled finding this solution, for the longest time. Thanks a million, I think I am going to pay closer attention to your blog as i am fast becoming a ninja in thesis and you are really helping find the blank spots in my learning curve, Thanks šŸ™‚

  382. Hi Kristarella –

    I’m trying to achieve a full width header with an image (e.g. my image stretched out across the width of my page) like this website: http://www.mxpolice.com/

    After reading through your great tutorials, I think I am almost (?) there? I am finding it hard to make my image stretch past the “boundaries”…Would doing something like comment 77 work for me? My website is: http://www.rathercultured.com

    Any help would be much appreciated!

    Thanks

  384. Dear Kristarella,

    I wish to get your assistance on how to creating a full width navigation bar on my homepage. I tried on dreamweaver to make a bar to full the screen but everytime there is always a gap on both ends.

    I’ve read your codes but have no idea how to put your code onto my page.
    Would you please give me some hints on how to realize that.

    Thank you in advance!

    Cheers,

    Randy

  385. Randy — I’m not sure what else I can tell you other than what is in the post. I could possibly troubleshoot it if I saw your site with the gaps on the nav in action, but not really out of thin air.

  386. I have a question, what is the correct total width for the page? Should it be 900px or 960px or something else? I want to have a 2 columns blog with 1 sidebar on the right, so my thinking is something like content: 600px + sidebar:300px (for the 900px option) or content: 660px + sidebar: 300px (for the 960px). Thanks.

  387. A — I don’t think there is one single correct width. I think more than 1024px is not preferable, but there is also a lot of talk about adaptive web design at the moment where you can accomodate several browser sizes and change the layout accordingly…

    The widths you need depend on your content. 600+300px sounds fine to me, that is a combination I use reasonably often.

  388. Hi Kristarella,
    At the time I set up my blog, I had a website company design my header and footer for me, according to a size that they decided on. I am assuming that its size cannot be changed, but I am not sure.

    http://www.dreambodymom.com/

    I did try following the steps in this post to see if it would do anything, but it did not help.

    Is there a way to make my header and footer comply with the full-width framework?

    Thanks so much.

  390. Vanessa — To make a full-width header and footer on your site you would need to modify the image so that it blended out into a uniform colour (e.g., the main blue colour) and then use that as the full-width background. At the moment your header and footer images have a pattern that stops with the edge of the image: it would look weird to try to extend that without tweaking the images. You would maybe also want to use a second repeatable background image with plain blue at the bottom and white at the top, so that the blue flourish out the top is still visible.

  391. I seem to be getting a smaller gap where the bottom of the nav bar and the page connect. It seem to be happening in 1.8..4. Not seeing it in 1.8.3.

    Any ideas how to resolve this?

    Thanks!

  392. I take that back…. Its happening in 1.8.3 and 1.8.4. It a small ripple in the corner where the bottom of the nav bar and the side of the page connect. It is happening on some sites but not others. Not sure what the difference is?

  393. Jason — Sorry, without seeing it live I don’t know. I still use this code with almost every design I do and don’t remember getting such an issue. It could be some padding or margins somewhere, but that would probably be content dependent since I don’t get the same issue on all my designs.

  397. Fixed it šŸ™‚ I just changed the colors of the nav menu around and fixed it. Thanks so much for all of your help!

  398. Hi, when I tried to put in the 2nd part of step 2, my whole site became unviewable….this is what my site looks like right now:

    http://confessedtravelholic.com/

    Is there a way I can extend the nav bar to the edges? I’m not sure if I’m doing something wrong.

    Please help! Thanks!!

    • Michelle — if by “unviewable” you mean the site went blank, then somehow a PHP error was caused… I would recommend trying again and if the same thing happens again set WP_DEBUG to true in wp-config.php and see what the error message says. It will indicate where the problem is. I wrote about troubleshooting on the DIYthemes blog, which includes PHP error messages, but you can paste your code and error message here if it’s still a problem.

  399. Hi! Thanks for the reply!

    The error message I get is: Parse error: syntax error, unexpected ‘.’ in /home/mlin/public_html/wp-content/themes/thesis_184/custom/custom_functions.php on line 26

    This is what I have in my custom.css:

    /*
    File: custom.css
    Description: Custom styles for Thesis
    More Info: http://diythemes.com/thesis/rtfm/custom-css/
    */

    .custom #header_area {background:#000000;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}

    .custom #header_area { border-bottom:none;
    height:311px;
    padding-top:0;
    padding-bottom:0;
    background:url(http://confessedtravelholic.com/headers.jpg)
    center center no-repeat; }

    .custom #header #logo { display:none; }
    .custom #header #tagline { display:none; }

    And this is what I have in my custom_functions.php:

    <?php
    /* By taking advantage of hooks, filters, and the Custom Loop API, you can make Thesis
    * do ANYTHING you want. For more information, please see the following articles from
    * the Thesis Userâļæ½ļæ½s Guide or visit the members-only Thesis Support Forums:
    *
    * Hooks: http://diythemes.com/thesis/rt.....ith-hooks/
    * Filters: http://diythemes.com/thesis/rt.....h-filters/
    * Custom Loop API: http://diythemes.com/thesis/rtfm/custom-loop-api/

    —:[ place your custom code below this line ]:—*/

    function full_width_nav() { ?>
    <div id="nav_area" class="full_width">
    <div class="page">
    <?php thesis_nav_menu(); ?>
    </div>
    </div>
    <?php }
    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_before_content_area’, ‘full_width_nav’);

    Thanks again!

  400. Michelle — Is that really all that is in your custom_functions.php? The error message says the error is on line 26 of custom_functions.php, but when I copy and paste what you’ve pasted into my text editor there is no line 26.

  401. Oh sorry! this is what I have in custom_functions.php. thanks again!! šŸ™‚

    <?php
    /* By taking advantage of hooks, filters, and the Custom Loop API, you can make Thesis
    * do ANYTHING you want. For more information, please see the following articles from
    * the Thesis Userâļæ½ļæ½s Guide or visit the members-only Thesis Support Forums:
    *
    * Hooks: http://diythemes.com/thesis/rt.....ith-hooks/
    * Filters: http://diythemes.com/thesis/rt.....h-filters/
    * Custom Loop API: http://diythemes.com/thesis/rtfm/custom-loop-api/

    —:[ place your custom code below this line ]:—*/

    function full_width_nav() { ?>
    <div id="nav_area" class="full_width">
    <div class="page">
    <?php thesis_nav_menu(); ?>
    </div>
    </div>
    <?php }
    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_before_content_area’, ‘full_width_nav’);

    .custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
    .custom #nav_area .page {background:transparent;}
    .custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}

  402. Michelle — You have your CSS in your custom_functions.php file, which is what is causing the error: the unexpected “.”
    Everything after add_action(ā€˜thesis_hook_before_content_areaā€™, ā€˜full_width_navā€™); should be deleted or moved to custom.css.

  404. Hello Kristarella,

    I’ve implemented this tutorial, but I get 2 error messages.
    The error messages appear only in the dashboard area.

    My page: http://gofcb.de/

    The error messages::

    Warning: Cannot modify header information – headers already sent by (output started at /home/babbesms/public_html/wp-content/themes/thesis_184/custom/custom_functions.php:1) in /home/babbesms/public_html/wp-includes/functions.php on line 861

    Warning: Cannot modify header information – headers already sent by (output started at /home/babbesms/public_html/wp-content/themes/thesis_184/custom/custom_functions.php:1) in /home/babbesms/public_html/wp-includes/functions.php on line 862

    What did I do wrong?

    My code custom.css:

    /*
    File: custom.css
    Description: Custom styles for Thesis
    More Info: http://diythemes.com/thesis/rtfm/custom-css/
    */

    .custom #header_area {background:#213C63;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}

    .custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
    .custom #nav_area .page {background:transparent;}
    .custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}

    My code custom_functions.php:

    <?php }
    remove_action('thesis_hook_before_header', 'thesis_nav_menu');
    add_action('thesis_hook_before_content_area', 'full_width_nav');

    —————————————————————————————-
    I use Thesis 1.8.4
    I use WordPress (version 3.3.2).

    Please help me and for my bad English, I apologize, I'm from Germany.

    Thanks
    B Pros

    • Bernhard — I didn’t see your first comment before the others as is was caught up in moderation.

      Apart from what I said before, “headers already sent” are PHP, and sometimes have to do with excess white space. Since the first error seems to be on line 1 of your functions file, make sure there is nothing (not even space) before the

  405. My code custom_functions.php:

    <?php }
    remove_action('thesis_hook_before_header', 'thesis_nav_menu');
    add_action('thesis_hook_before_content_area', 'full_width_nav');

  406. My code custom_functions.php:

    <?php }
    remove_action(ā€˜thesis_hook_before_headerā€™, ā€˜thesis_nav_menuā€™);
    add_action(ā€˜thesis_hook_before_content_areaā€™, ā€˜full_width_navā€™);

  407. Bernhard — I don’t know if there is a question there, but I can say that your code is missing the function full_width_nav; so it’s not going to add something that doesn’t exist before the content area.

  409. hi kris,

    i am new to theis and i want to use full width header along with drop shadow to the page area. I followed your post to get the header done but the shadow goes away. Can you please suggest a way around.

  410. Cellian — Sorry, the two don’t work automatically together. You can’t replicate the Thesis shadow effect perfectly in full-width, but you can give it a bit of a border:
    .custom #content_area .page {border:solid #eee; border-width:0 2px;}
    .custom #footer_area .page {border:solid #eee; border-width:0 2px 2px;}

    Or, I see you’ve got the CSS shadow on your site, so you can apply it to just the two elements I just mentioned instead of the border, that should work too. It might need some tweaking for the shadow of #content_area not to overlap the header though.

  411. hi kristarella, thanks for tip, it worked. I added the shadow under content area and footer area like this

    .custom #content_area .page {-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0);}
    .custom #footer_area .page {-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0);}

    This gave a shadow effect in full framework. Thanks a lot!

  412. Wow, there are a lot of comments on here.

    I am trying to eliminate the white space to the left and right of my header image. I tried inserting an image and it looks fine on my 13″ MacBook, but when I look at it on my 27″ iMac it is all messed up. How do I fill in that white space with a continuation of my header color so that it works with all sizes?

    Thanks!

  413. Sheehan — The post has all the code needed, and the post linked to at the start of this post has more explanation of the HTML and CSS…
    On your site you have this line of CSS: #header_area{background:#1b3aa4;background:url(http://passiveincomekey.com/wp-content/uploads/2012/06/Header-Sidebar-Area.png);background-size:100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}
    I’m not sure how the background size bit works out in all of this and whether it works the way you want (it doesn’t seem to be doing anything in my browser), but you have a background colour set, using the “background” property, but then you have it reset with the image (it doesn’t compound the two values, but the second overrides the first). I would recommend changing that whole line to: #header_area{background:#1b3aa4 url(http://passiveincomekey.com/wp-content/uploads/2012/06/Header-Sidebar-Area.png) no-repeat;}

    I suppose you could even remove the image from that one, since it looks like the header image is actually being added to #header, so it’s just the background colour you need.

    The post also covers creating a separate nav if you want to maintain the border between header and nav.

  414. Wow, I don’t really understand.

    The code I have on there I just copied and pasted from another site.

    I want the header areas to look like the header/nav menu with the white line so I did a snippet of a part of the header and used it as an image.

    http://passiveincomekey.com/wp.....r-Area.png

    I want it to look like this: http://www.incomediary.com/

    If I wanted to learn all of this would you recommend CSS: The missing manual or is there something else? Thanks!

    • Sheehan — if I knew which post you’d followed I might be able to help more in context, but some things to note are when I click the link to the image you want to use it says 404 not found, so perhaps that is part of the problem; also you had the background image set to no-repeat, which is probably not suitable; background-size might not be fully supported by all browsers yet, and may cause pixelation if increasing the size of an image.

      I haven’t read that book, so I can’t say how helpful it would be. Learning in context I think is generally more effective. You could start with http://diythemes.com/thesis/cs.....ty-thesis/

      There is another comment on this post dealing with what you’re trying to do ( I’d directly link if I wasn’t in the mobile app), if you scroll through looking for the picture of a house in grass in the comments you should find my explanation on a repeating header background.

  415. As the site is right now: http://www.passiveincomekey.com and starting new, how do I continue the header to make it the full width of the browser?

    I got that code from another tutorial site and just copied and pasted it. I went through all the comments and am still a bit confused. My apologies.

    -Sheehan

  416. Hi Kristarella!

    I’ve checked my css and custom_functions settings several times, and I believe I added all your code(s) correctly, but for some reason I can not get the original Thesis nav menu to remove. Everything else looks good and is viewable other than this. Any ideas?

    Thank you!

    James

  417. James — I don’t know what’s wrong, but things to check are that you have remove_action('thesis_hook_before_header', 'thesis_nav_menu');, and that there’s not another line that says add_action('thesis_hook_before_header', 'thesis_nav_menu');. If you’re using the Open Hook plugin you should check in there for that second line of code too.