Part 1 – Understanding the Full Width Layout
In this part of the seminar we look at the various structural elements of the traditional Thesis Full Width Framework. We look at how the full width elements are laid out and how the page width elements are included within them.
We are going to dive right into the skin editor. The classic skin is a 3-column skin and what we’re going to do is take this classic page width 3-column skin and we’re going to turn it into a full width 2-column skin as we’re working on our way through this system.
3 Main Horizontal Division in the Traditional Full Width Framework
If you’ve taken any of my classes before, you know that the traditional Thesis Full Width Framework consists of 3 parts. In fact, I’m just going to bring up a site that shows this. So this is the demonstration site that I used in teaching the How To Build A Professional Website Using Thesis class here a few months ago. This site is a full width framework site and it has those elements in it.
First, you have your 3 main horizontal elements which are your header area and the header area spans from edge to edge of your browser window and then from top to the bottom of the header.
You have your content area which also spans from edge to edge and then from the bottom of the header down to the top of the footer area. And then you have your footer area which spans from edge to edge and that goes from the bottom of the content to the bottom of the content area.
So those are the 3 main horizontal divisions. And then inside of each one of those divisions, there’s a page division. So you have header area page and the page is the part that goes like this. It’s just right there in the middle.
In fact, if we inspect the element…there’s the header area. There’s the content area that’s highlighting, right? If we look at header area page, the header area page is not the orange part but it’s the part with the blue and the yellow. That’s the page part of the full width content.
The same thing is true with the content area page. Again, it’s not the orange part but it’s the blue and yellow part. And the same thing is true down here with the footer area page. Again, it’s this middle part here that is the page.
Basic HTML Structure
And so when you look at the basic HTML structure of the Thesis Full Width Framework, you have your body which is absolutely everything on the window period. And then inside of that, you have your header area and then inside of that header area, page. Then below header area is content area and inside of that is content area page. And then finally, below all of that was footer area and inside of footer area was footer area .page. So you have 6 main HTML structures that make the page what it is.
Thesis 2.0 Full Width Framework Layout
Now, contrast that with the current layout here and this mimics the page width layout, that is it’s got the body which is of course, the entire window. But then inside of that body is the container. And the container holds everything else. So you got a body and then a container and then inside the container, you have a menu and a header and some columns and a footer. But those things are all inside of this one wrapping container.
So we’re going to be dispensing with this one wrapping container and creating our 3 full width containers and then our 3 page containers and we’re going to be doing that here.