In this session we discuss the differences between Thesis full width framework and the WordPress page width framework, then show some sample sites to view their differences.
Rick: So then Heidi, what we want to do is work on… you asked about the Full Width Framework?
Heidi: Yes, I… you seem to have a preference for it and you have a lot of plugins, many of them working only for the full width framework. So do you have a preference for the one framework over the other? Basically, why?
Rick: Sure. Actually, I don’t and there’s only one plugin that only works for the full width framework and that’s the full width backgrounds plugin. So the one that creates this you know, background image that can span from edge of window to edge of window for the header area, the content area and… there’s no footer area here, but for the footer area. Otherwise… so that’s the only plugin that I have that only works with the full width framework.
But it is a good question you know, what’s the difference between the full width framework and the page width framework. I mean, my site is a page width framework. And you could make a site that looks exactly like my site in the full width framework without you know, any struggles whatsoever. But you wouldn’t be using the functionality of the full width framework for that.
What the page width framework does is it divides… well you have 3 levels of containers that encompass the entire page. So the first level is the universal container which is body and body always spans from the top of the browser window to the bottom of the browser window and from the left edge of the browser window to the right edge. It doesn’t really matter what the case is. Body is always going to be that dimension, whatever the dimension your browser window is.
Inside of body, in the page framework, you have a div called content and then a… actually, is it content? Let’s go look at my site here for a second. thesiscss.com, I think I have an image of this. So inside the page framework, you have body and then you have the div id container and then you have div id page. Now by default, container and page are the same size so there’s no border or margin or anything like that. Container itself doesn’t… isn’t giving a size but page is giving a size. So that’s how the width of the page framework works.
And I’m not exactly sure why there is this separate container so that you have page and then page. I don’t know why. What I did in order to create this illustration was I gave, div id container, I gave it some padding so that it would stand out, so that it would force page inside of it. But otherwise, it’s just one great big square or one big rectangle. And container is as wide as it’s defined by Thesis when you define the size of your type or the size of your font or the width of your columns. Thesis takes that… creates a calculation which establishes the width of the page. And in that case, container is that wide and then as tall as necessary in order to contain all of the content inside of it.
Whereas, in the full width framework, the full width framework has 3 big container areas inside of body. So it still has body and body still spans the entire dimension. But then it has a header area, a content area, and a footer area. And the header area spans from left to right, the entire width of the window and then it’s as tall as it’s necessary in order to contain everything that’s inside of header .page. And so you’ve got your header area and then you’ve got a page element inside of that header area and then you header is inside of that page element.
So if we look at the site in… let’s see, let’s go to a site where we can just go back to Thesis eMember. So in this case, our header area spans from the bottom of this yellow to the top edge of that, of the window, and then from one side of the window to the next. And so if we inspect that element in Firebug, here’s our header area. I should make this smaller so you can see where it stops. Here’s our header area and then inside of that is this class page and this class page is defined… its width is defined the same way the page width is defined in the page width itself. So it’s the slightly complex calculation of font size plus column size is that you defined in your… in the Design Options. But this… if your font size and the column sizes were the same in both types of sites, the page would be the same dimension. So this is called header area and then you’ve got a div inside of that class page. And that div class page width comes from that Thesis calculation. And then inside of div class page, you have div id header and then in this case, because of the way it’s organized, you have UL menu.
And you contrast that with this layout here where you have the body which is everything and then I have this custom created div that is outside of the normal Thesis flow called div id sliding panel container and it’s from my little login thing here. And it doesn’t normally exist so if you took that out, the next thing down would be div id container. And then inside of… and then div id container right now is the 98 ems here, it is the width that was calculated by Thesis for the width of the page. And then div id page doesn’t actually have a page definition, a width definition. It just has a padding so the page fills up all of the container. And then inside of that is header but so is everything else. Everything is inside of div id page now.
But back over here, inside of div id page… not div id page, div class page… you only have header and menu and then you go down to the next level of division, to content area. And content area also has a div class page and it ends up with being the same width. And then inside of div class page is the content box and inside of the content box is the content of the sidebars.
And so, if you went down to the footer area, you’d have exactly the same thing going on in the footer area. The footer area, again, spans the full width and has inside of it, a div class page which is the same width as every other page here, each other page.
So what that allows you to do then is it allows you to style each you know, layer or each section of a site differently. So in the case of… let’s go look at Sean’s site here for just a second, we go over to… what was that? Where did I put that? I put that under header horizontal widgets. Yeah, that’s where I put it. We take a look at Sean’s site here. We used the Full Width Backgrounds plugin to add this background image to body, right? And then inside of body is the header area so let’s get up here to header area. So there’s our header area and inside of header area, again, we used that plugin to insert this background image here which is the background image that produces the blue background plus the little bit of shadow. So it’s a 20-pixel tall background image. It’s that wide and then it just repeat itself until it gets the end of the header image.
And then we wanted this…we wanted a blue edge to the page but then the page to be white. And so what we did was inside of the content area, we created another one of those images but instead of being all blue across it, it was blue up to the edge where we wanted the white to start and then it’s white and then it’s blue and then it’s got the background shadow again. So it continues… it looks like this you know, except it’s got the little white spot over it and then that continues all the way down to the end of content area.
And then footer area resumes that full blue style or that background image again, 20 pixels wide by this 20 pixels tall by this width. You can’t see the shadow anymore because it’s against the background but that’s what continues on down.
So that gives us the ability to have, in this case, a different background image from each individual part of the site or each stack of the site. So footer area, content area, and header area…all can have different backgrounds which you can’t do in the page framework because you know, eventually, what’s going to happen is that you can have multiple backgrounds… you’ll be able to have multiple background images in a given div or a given class. But you can’t do that right now. Right now, you can only have a single background image. And so, if you want you know, various styles, if you want one with white and one with blue only then you’ll have to have you know, at least 2 different divs in order to create that. And that’s what the full width framework does for you, just gives you that ability to do that.
So I don’t have it as a preference but it does add a layer of flexibility to the styling of a site that you don’t necessarily have in the page framework.