This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome to Lesson 9 of the Build Your Own E-Commerce Website tutorial series. The goal of this tutorial series is to show you how to create a fully functional ecommerce website using WordPress, Thesis and WP e-Store.
This is the third of the tutorials on styling your new ecommerce website. In these tutorials we’ll be styling this site to match the demonstration site and obviously you won’t be creating your store exactly like this but it is my hope that by going through these exercises you’ll learn how to style your own site the way you want.
In this lesson we’ll look at setting up the basic configuration of the full-width framework. This lesson uses Thesis 1.8. If you’re still using Thesis 1.7 you may want to upgrade because there are some differences, although the differences in this section aren’t significant and you would be able to follow along anyway.
Differences Between the Thesis Full-width and Page Framework
Let’s go ahead and get started. In the first part of this lesson we’re going to look at the differences between the page and the full-width frameworks. I’ve created a diagram of a web page in order to help understand this concept.
Let’s go through the diagram. Obviously this is the browser window. It spans from one side to the other and from top to bottom. In the page framework, inside the browser window you have this big container called body which extends from the top to the bottom of the browser window and from the left side to the right side of the browser window and it doesn’t matter how big that browser window gets, the body always expands to contain that.
If we could drag this browser window across a very long monitor the body would extend all the way across. Inside the body then is the page and the page floats in the middle of the body generally sitting up at the top of the window. If the page is smaller than the height of the window then the body surrounds it and if the page is smaller than the width of the window then the body surrounds it on either side as well. The page can be forced down so that the body surrounds the top. Anyway, this floats in the middle of the body; this is the page.
Then inside the page we have our three big divisions. We have our header; our content and our footer as the three main divisions inside of page. So you have the body which surrounds everything and you have page which floats in the middle and page then contains header, content and footer.
Before we step away from that I’d like take a look at my Thesis CSS site. Come on over here I’ve got a link to the Thesiscss.com here. So if we open that link in a new tab – our page framework looks like this. You have first the body which is this dark green color that wraps around this and then we have everything that’s contained inside the page. Actually the first container inside of the page is called container and that is illustrated by this yellow band here and inside of container we have page which is our main container for the rest of the page.
Then you have the menu which sits on top of the header, and the header and the content or content box in this case and then the footer. So just like this illustration where we had body and then our page and then header, content and footer.That’s the page framework.
Let’s take a look at the full-width framework now. It is different and while it does have a body, that body doesn’t extend beyond the limits of the full-width framework itself. That is, in this case the body contains and the limits of the page framework are from one side of the page to the next and the body expands but this sits in the middle. In the full-width framework what happens is it expands to fill the space from top to bottom and from left to right and that space is filled with three layers.
You have layer 1 which is the header area; you have layer 2 which is the content area and then you have layer 3 is the footer area and if you stretch this window wide open then this layer just continues to just stretch across so that it takes up the full width of the browser window that you’re looking at.
Layered on top of are the elements of the page inside the full-width layout. You have this header area which goes across here but then you have header_area.page which is this part that floats in the middle and so now you have another element that stands in for or is similar to the page element in the previous example but this sits inside of the header element or the header area. This content.page sits inside of this content area and this footer.page sits inside of this footer area. So you have these page elements, each one sitting inside of the full-width framework elements.
Come back over and take a look at the Thesis CSS for a moment. If we take a look at it you can see you have this one layer which is the header area and then you have the header area page which is represented by this white section and that header area page then contains the menu. Then the header and then this content area again spans from side to side and then inside of that content area is this content_area.page and then finally the same thing is true of the footer. The footer spans all the way across and then this footer_area.page sits right inside and in the middle of this.
Then one thing that I think may not be automatically obvious is that if the accumulative heights of header area, content area and footer area are not as tall as the browser window then you can see the body below the footer area.
That wraps up Part 1 of Lesson 9, Understanding the Thesis Full-Width Framework.