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.

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 class="page">
			<?php thesis_nav_menu(); ?>
		</div>
	</div>
<?php }
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):

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.