The Ultimate Visual Guide to the Thesis Full-Width Framework

If you’re like most users, there are so many options available in the Thesis administration panels that you haven’t actually tried out all of them – and you might not know what they all do. One option in particular has stumped many new Thesis users, as it’s not immediately obvious what it’s for. In fact, even if you change it, you probably won’t see anything visually change on your site at all. This simple option can make a world of difference in your choices for design. It’s found in the panel “Framework Options” under “Thesis Design Options” in the administration of your WordPress installation. By default, when you install a fresh copy of Thesis, the Page Framework is selected. You may have been using Thesis already for some time and never realized you had another option! For this tutorial, we will assume that you’re already familiar with customizing Thesis in the Page Framework mode and are ready to learn how to customize your site using the Full-Width Framework.

full-width

When the default Page Framework is active, a rendered page consists of a single #container which contains a #page element which encompasses all of your page elements: header, content, and footer. That #container is a certain width, and outside of it is the body background. Visually, this results in a layout that looks like a single, cohesive page floating on a background (if they’ve been colored differently, of course). Any customizations of the header, content or footer are restrained within that #page element, and thus do not reach from edge to edge of the window. Most new users run up against this limitation when they first attempt to create a custom header or footer that spans the width of the screen. A quick search on the Thesis forums reveals the answer: “switch to the Full-Width Framework” – but that’s just the beginning. You need to understand how Thesis is generating the page elements to take advantage of the new layout possibilities.

Once you’ve switched your options to the Full-Width Framework, you may not see anything change visually at first – but a close inspection of the html code that Thesis has generated will reveal some new “zones” that didn’t exist before:

  • #header_area
  • #content_area
  • #footer_area

All three of these also have the class .full_width as well. The #page element id has changed to a .page element class, and it has now been placed as a div inside of each of the three areas. Your page, in effect, has been sliced into 3 horizontal “zones”, which extend the full-width of the screen. Because these zones are stacked upon each other, your page probably still looks just like before – a single, cohesive page – but now you could in theory separate these regions (with padding or margins) and most of all, style them independently, creating the visual design that is so common these days of having headers and footers that span the entire window and are visually different from the middle “content” region.

In the Page Framework the elements were nested like this:

body > #container > .page > #header
body > #container > .page > #content_box
body > #container > .page > #footer

In the Full-Width Framework, they are nested like this:

body > #header_area > .page > #header
body > #content_area > .page > #content_box
body > #footer_area > .page > #footer

Thus, if you already had an image as the background of the #header, it will still only reach from edge to edge of the page (that’s why nothing seemed to change). In order to create a visual header graphic that spans the screen, you will want to target the #header_area instead. You can still apply formatting to the #header, but as it is nested within the .page, it will be limited in its size.

A note on “Outer Page Padding”: you may have noticed another option within the same “Framework Options” panel. This, as it states, applies extra padding to the .page element which contains the #header, #content_box, and #footer – which, as long as it is colored the same as the nested elements, will simply look like you’ve added a gap around the entire page edge. Style it differently, however, and you will notice that it is only visible if you set the “Outer Page Padding” to anything other than zero, *or* if its nested child elements have no background color or images of their own (being transparent, they will show the .page element “underneath”).

Now that you’ve learned how the Full-Width Framework modifies Thesis’ html output, you may already be tempted to jump right in with your new design. Something that many people prefer when designing massive full-width headers is to move the navigation menu out of the header entirely (so as not to be limited by the width of the #header, which is nested inside the .page. A popular mod was shared by Kristarella some time ago to move the navigation menu out of the header and into its own “zone” below the entire #header_area. Thanks to the powerful hook system of Thesis, you can rearrange the elements quite easily by adding the following code to your custom_functions.php file:

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

This function prevents Thesis from generating the nav menu where it usually would, then defines a new #nav_area, inserted between the #header_area and #content_area, with the .page class nested just like the other zones, and the nav menu gets generated within. Now you can style the #nav_area to look like the navbar fills the full width of the screen.

The following visual guide should help you see how it all comes together (click to enlarge):

thesis-full-width-guide-narrow

Remember that the “nested” elements are actually drawn on top of their parent elements. This has been visualized above with shades of color. Darker colors are lower “layers”, with lighter ones overlaid on top – thus from bottom up you have #header_area, then #header_area .page, then #header. If you do not specify formatting for upper layers (or in some cases, if you remove the default thesis formatting, usually #fff backgrounds), they will transparently show whatever is specified for the layers below. It also helps to remember that each #[zone]_area always spans the whole width behind everything else, so if yours doesn’t appear to, it’s because something is overlaid on top and its formatting is blocking your view of the elements underneath.

This also explains how you can specify an image for #header_area .page that spans the full width of the “page”, but not the full “screen”, while maintaining the page padding which gives a nice margin for the content below. By doing so, you could have a repeating infinite background assigned to the #header_area, which would extend to the screen edges, and a single image assigned to #header_area .page that blends seamlessly with the #header_area background.

If it helps, you can recreate the above screenshot with your own clean install of Thesis by pasting the following code into your custom.css:

/* HEADER ZONE */

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

.custom #header_area .page { background: #7a98c2; }

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

/* NAVBAR ZONE */

.custom #nav_area { background: #589b4d; }

.custom #nav_area .page { background: #7fc874; }

.custom .menu { background: #c4e9be; 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: #ffffd3; }

/* FOOTER ZONE */

.custom #footer_area { background: #eba7b5; }

.custom #footer_area .page { background: #eccdd3; }

.custom #footer { border: 0; background: #fef; }

/* BEHIND EVERYTHING */

body.custom { background: #9b1f1f; }

Remember that any .page styling will only be visible extending around the edges if you have the “Outer Page Padding” set to something greater than zero. Otherwise, the .page element will still be there, but it won’t show past the edges and will most likely be obscured by the nested elements above it.

The Full-Width Framework is a very powerful layout within Thesis. I personally always enable it on every Thesis customization I do, even if I’m not designing anything visually that will appear from edge to edge of the screen. I like how it breaks up the page into three “zones”, which makes it really easy for me to insert custom code in between those zones. It also allows me to format the header and footer independently from the content section. It’s probably the most familiar layout system for most WordPress tweakers (it’s comparable to other themes) even though the Page Framework is enabled by default. That’s exactly why people who have designed WordPress sites from scratch often switch on the Full-Width Framework first (or bang their heads a few times before discovering the solution on the Forums) before they begin to customize Thesis.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Israel Curtis

Israel is a music producer / designer / entrepreneur based in Utah. He codes exclusively for Wordpress and Thesis. Check out his portfolio at www.somaticstudios.com or follow him on twitter @israelcurtis

Leave a Reply

Comments

  • Peter says:

    An extremely well written tutorial/info. Damn fine job!

    Biggups & thank you! (From a thesis/php/wordpress newbie)

  • Ultimate Visual Guide To Thesis Frame says:

    [...] Mark Vernik on January 11, 2010 Art of the Blog has this really good resource about custom CSS for Thesis template. It’s based on the full width option for the Thesis [...]

  • kristarella says:

    Love the visual framework idea and your customisations on this site are smooth!

    Bit of an error in the post though, .page only exists in the full-width framework. In the page framework the element inside #container is #page, with an ID of page, not a class.

  • Israel Curtis says:

    @kristarella – If my errors had to be spotted by someone, I’d rather it be it you ;-)

    post duly updated….

  • Aaron Voreck says:

    I have been waiting exactly for this,

    thank you

  • Chris says:

    Israel,

    Thank you. Very helpful article and something I needed to read.

    I have one question about this.

    I’m using Thesis to design a header in which I want the #header to float right and the #menu to float left. So, I’ve removed them from the .page container.

    So far it looks okay but I’m wondering if I’m setting myself up for a fall.

    Is there any reason why I would NOT want to take the header outside of the .page class?

    Will doing so tamper with the page padding and the nice margin it creates for the content below?

  • Chetan says:

    Excellent visualization tutorial..you really made it look easy …

    Thanks a bunch…

  • Chris says:

    Great tutorial – I come back to this page again and again.

    Thank you

  • JC says:

    Do you guys find the full-width framework easier to manipulate? I’ve just started messing with it this morning and I feel like a million light bulbs have been turned on!

  • Love the tutorial, I find it much easier to follow a written tutorial then a video. I would like to see a PSD to Thesis tutorial one day.

  • VJ says:

    Tutorial is mind boggling. I am so impressed with your visual way of presentation. Thank you.

  • [...] The Ultimate Visual Guide to the Thesis Full-Width Framework [...]

  • Adam says:

    Thanks, but this tutorial does not work at all for me. I have easytheis installed, and it just crops the whole top of the page off. Hopefully I can find a better tutorial somewhere, because this one kinda sucks.

    • JC says:

      sorry that you’re having problems Adam. did you copy and paste the code exactly as-is? is it the only code you have in your custom.css and custom_functions file?

      Can you provide a link so we can see what’s up?

  • Mario says:

    Hi, very nice tutorial – your colour scheme is excellent! I have Thesisi 1.7 installed and I am not familiar with it (actually it is a bit overwhelming). Trying now for hours to construct the full screen header and nav-bar, to put your tutorial in to practice. Everything is fine except for the “header area” and the “nav area” do not show up! But this is what I want and need….

    When I make use of your function above and put it in the custom_functions.php file, I get this errormessage in the line where the menue should appear:” 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″ – Could this relate to the new Thesis version? Do you havé an idea or hint? Would appreciate your help very much! Thank you very much in advance

  • Randolph Eustace-Walden says:

    Hi All,

    Been messin’ with websites forever it seems (still have my original clay tablets – heady days!), but Thesis has to be, flat-out, the best design template I’ve ever encountered for WordPress. Just grabbed 1.7 for a website redesign and working my way through some tutorials. This one nailed my first thought about ‘full width’, so it’s very timely where I’m concerned. Again thanks for all the great work. Cheers!

    Randy

  • KyleWith says:

    I’m trying do create the full width nav menu that is only as wide as the content area, then have a outer page padding, but I can’t seem to get the menu to display properly. It over lays the menu/color on the page padding. I tried removing and a bunch of different things with the #nav_area .page but nothing sees to work with out messing up with color of the full width.
    Heres the css.

    /* Full Width Nav Menu */
    #nav_area { background-color: #DD0404;}
    #nav_area .page { background-color: #DD0404;}
    .full_width { width:900px; margin-left:auto; margin-right:auto;}

  • One of the best articles on thesis customization. I was thinking the same from the last 1 month about tips on full width frame work customization and this tells me everything.
    Thanks
    Pritam Nagrale

  • Thank you so much! Your image of the framework helped me solve a problem I’ve been having with my site since forever.

  • This tutorial not only got me upto speed with customizing thesis but also taught me all the basics of css. The visual guide is great.

    Thesis + Firebug + This tutorial = a crash course in css and thesis customization!

    Huge thank you!
    Is there a “buy me a beer” button somewhere?

  • Then have a outer page padding, but I can’t seem to get the menu to display properly. It over lays the menu/color on the page padding

  • Ted M says:

    I am trying to figure out how to remove the bottom “RED” area that appears in your sample code. I’ve tried everything I know but nothing seems to work. Otherwise, it’s a great tutorial and I think it will work great for this site but not with all that extra space on the body tag at the bottom.

    Any suggestion would be greatly appreciated.

    Ted M.

  • Wendy says:

    Nice tutorial! However, is there a way to make the full width nav_area appear before the header instead of after the header area?

  • threza says:

    This full width method is not showing properly in Internet explorer. My website is not getting positioned at the center of the browser. Its sticking to left of page……

  • Bill Bliss says:

    I was trying to achieve the affect on kristarella.com, where the nav bar appears at the very top. The above code and kristarella.com’s markup pointed me in the right direction, but in case it’s helpful to anyone, the code below will swap the header and the nav bar, more or less how kristarella.com does it.

    /**
    * Move navigation bar out of the header and into its own full-width zone
    * Documented here: http://www.artofblog.com/the-ultimate-visual-guide-to-the-thesis-full-width-framework/
    */
    function full_width_nav() { ?>

    <?php }
    remove_action('thesis_hook_before_header', 'thesis_nav_menu');
    add_action('thesis_hook_before_html', 'full_width_nav');
    // Replace the above line with this line instead to swap header and nav:
    // add_action('thesis_hook_before_content_area', 'full_width_nav');

  • heather hill says:

    Can’t thank you enough for the clear and concise explanation! I’ve been trying to do a full width header for way too long now! The image was really helpful!
    Thanks so much!

  • Neil Lee says:

    Thanks Israel

    This is really, really helpful. Just starting to get to grips with Thesis and CSS and this is just the road map I need. Bookmarked this page and will recommend to others.

  • Eric Shalit says:

    As a visual designer who writes, I’m particularly impressed with your clear, concise, meaningful writing. I haven’t applied your tutorial yet to my new website, but am about to give it a shot. You just earned a reader. Thanks!

  • Rob says:

    This post is kind of helpful, but I was not able to make the full width header that I needed with it. Hard to find good Thesis info online, so I don’t use it anymore.

  • Brian says:

    Rob,

    Wow…since 1998, huh? You’re pretty special. All that time and you’re too dumb to figure out how to use css and some basic html apparently.

    Thesis isn’t difficult. Effort is. Don’t expect to be able to half ass things and get a good result. Hiring a developer that specialized in WordPress doesn’t mean anything. There are thousands of people who claim to be a “developer” just because they can hack at a WordPress skin.

    If you think the 2010 theme accomplishes what Thesis does, you clearly don’t understand Thesis or why you should be using it. As for “ugly sites,” that’s only because you have no clue what you’re doing and haven’t looked around. Simple, clean, and easy to use does not equal ugly, but apparently in your dense mind it does.

    Normally I just let things go if someone doesn’t get it, but clearly you’re looking for an argument and I’m bored, so here we are.

  • Kathleen says:

    Thank you so much for this article1 it saved me! :D

  • Gouri says:

    Thanks a lot, especially for the footer part!

  • Rob says:

    @Brian. You look like a little punk in your picture. I have developed websites that have done millions of dollars in sales, along with designing a website for one of the major casinos in vegas. Yes, that means some months I make up to $50,000. I don’t think that would be possible without knowing CSS and basic HTML. What have you done? Probably not much from your moms basement.

    I hired someone who develops wordpress sites every day. That’s what he does for a living. I think there is something wrong when he couldn’t even get Thesis to work correctly. You can put blind faith into something and be a Thesis fanboy, I honestly don’t care.

    @ Matt – I network with some of the best web designers on earth. We all agree the newest version of WordPress includes all the best features of Thesis, and is not worth the extra problems that arise when using it. I am not going to respond to anything your wrote, since it is clearly flamebait. I feel sorry that you cannot connect the dots in your mind to come to a logical conclusion. I am just surprised that a janitor would have this much interest in a crappy wordpress framework.

  • Jasper says:

    Thank you so much. It really worked!

  • Laura says:

    this saved me and I love you.

  • Justin says:

    Dude I just had to write to thank you for such an incredibly helpful post. It’s transformed my website. I’m a novice and not an artist by any means, but your easy-to-follow instructions helped me so much to infuse more interest in my site. Keep it up :)

  • Kat says:

    BIG thank you for this article!

    Many little nuances now demystified.

  • [...] is a great post on artofblog.com about the difference between Page Framework and Full-Width Framework in Thesis. I used and modified [...]

  • Janice says:

    Thank you! I had been looking for the code for the full width, and your tutorial is PERFECT! Now I can see where to change the code coloring as I need to.

  • Toufiq says:

    Great Thanks! But do you have any idea about Site layout problem of thesis 1.8.5! Its not showing change! Pretty ugly problem..hope your next topic will be on latest thesis! :)

  • prabhat says:

    a great article, i must say. i am using thesis on my blog and was searching for this and i am happy that i found your article and kristine is really an amazing coder. hope i learn something from you too. going to apply these tips tomorrow on my blog because i am feeling sleepy today.thanks for this article

  • Matt says:

    Thanks so much for this tutorial, it’s helped me HEAPS to understand how thesis layout works. I’m currently trying to customise the nav_area and nav_area .page. This works fine until I switch the menu on in wordpress, then the customisation disappears. Do you have any ideas why this may be happening?? I’ve searched everywhere but cannot find an answer.

    Thanks again,

    Matt.

  • Ryan James says:

    I did not realize how valuable this post was in figuring out Thesis custom.css file until I was building my second site. I have spent the past 30 minutes trying to recall your site name, but the image of the different zones was stuck in my head. Thanks for the great post – because of you, I was able to get up to speed visually with Thesis. A picture is truly worth a thousand words.

  • Matt Langford says:

    Rob,

    Length of time in web design really doesn’t mean much considering how fast things change. Case-in-point: Thinking of this site’s design as “simple and ugly” shows complete ignorance in the field. You must still be thinking of designing site the 1998 way if that’s your true opinion.

    Next, if you couldn’t find adequate resources for Thesis online, you must not be experienced with using Google. Beyond that, simply asking a question in the forum would’ve gotten you the right answer (assuming you knew how to ask the question).

    You should probably check out some more Thesis sites (and the people who use them) before making a judgment about the theme. There is literally nothing that cannot be done (other than things limited by WordPress itself) with Thesis if you’re intelligent.

    Matt