Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 8 – Part 8 – Understanding the Full Width Framework

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do is to style the Header and the Footer, essentially add this style to the Header and add this style to the Footer. In order for us to do that, we first need to learn a little bit of the underlying theory of the Thesis Full Width Framework.

Thesis Full Width Framework

In order to get the appearance like that, you have to use the Thesis Full Width Backgrounds Plugin that we’ve just installed and to set those Settings properly you really need to understand the terminology and how things work together. In the first place, you really have two elements in a Thesis page. There is the Background and there is the Page.

Background Area in Thesis Theme

The Background spans from edge of browser to edge of browser, top and bottom. It doesn’t matter how big or how small that browser is, the Background always spans to fill all of the space inside the browser window. Top to bottom, side to side, its size is limited specifically by the size of the browser window and by nothing else, that’s the Background.

Page Area in Thesis Theme

The Page is the area on the screen whose width is defined by the combination of those column widths and margins. Its width comes from this column and this column and little margins in between the columns and on the edges, that’s what defines the width of the Page. The height of the Page is defined by its content.

In most pages, there is no Background below the bottom of the Page because the Page extends all the way down to fill up its content and the window will stop scrolling once it hits the bottom of the Page. For example, in this case the window stops scrolling once it hits the bottom of the Page because the Page is taller than the window is.

However, with our demonstration site we’ve create so far, our Page is only this tall and so Background happens down here. In order to illustrate that, we’re going to come over to Thesis Design Options and we’re going to look at the Body and Content area.

We’re going to set a site background color, light green and we leave our page background color white. Come back over here and refresh this and you can see this, this is the Background. If there was enough content on the page so that it was taller than the window then you’d never see green below the Page.

The point to take away from this is that a Page width comes from the combination of columns plus margins and its height always expands to encompass all of the content but never any more than that. Whereas, the Background is always the entire browser window even if the Page is smaller than that. It’s always the entire browser window so, the green here is the Background and the white is the Page.

Three Horizontal Divisions of a Full Width Framework

That is the first concept to take away from this. Now, Thesis has this thing called a Full Width Framework and it has 3 horizontal divisions. It has the Header area which is now signified by blue, it has the content area which is that section below the Header area and has a Footer area which is the section covered in green. The Footer area is the bottom of the Page, the Header area is on the top of the Page and the Content area is whatever is in between.

These Horizontal Divisions or the Header area, Content area and Footer area span the entire width of the area of the browser window. If the browser window is wide open then it spans the whole width, if the browser window is narrow then it only spans as far as the browser window but it does span from one edge of the browser window to the other.

In terms of its height, the Header area is as tall as it’s either defined or as necessary in order to contain the content inside the Header. The Content area is the same, it’s as tall as necessary in order to contain everything inside of the Content area and the same is true with the Footer but its width spans all the way across these 3 big stripes.

However, the page element does not necessarily expand all the way to the edge. What you have is, you have a Header area and then you have a Header Area Page which is this one white spot right in the middle, you have a Content area and a Content Area Page which is again this lighter color that expands from the edge of the page to the edge of the page. Then you have a Footer area and the Footer Area Page.

The Header Area Page, Content Area Page and Footer Area Page are as tall as their respective containers, that is the area is as tall as the Footer, the Content or the Header but they are only as wide as these are defined when we define the page width.

The reason why this is important is because when we style the Thesis Full Width Framework, we’re really styling 6 things. We’re styling the Header area and the Header Area Page, the Content area and the Content Area Page, the Footer area and the Footer Area Page. We have 6 things that we are addressing when we are talking about styling the Full Width Framework.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment