Build Your Own Business Website header image

How to Make a Full Width Header and Footer in Thesis

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects - ,

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.

In this session a member asks how to make a full width header and a widgetized footer. We discuss how to achieve that using Site Layout options in Thesis Design Options and some CSS code. We also show where to find some of our video tutorials about these subjects. Soon our Footer Widgets Plugin will be available for members and using this will help you create a widgetized footer area without having to use CSS codes.

Video Transcript

Am I pronouncing your name correctly? I’ve just unmuted your microphone.

Yes you did. Thank you.

Perfect. So you have a question about how to create a full width header and widgetized footer and that sort of thing?

Yeah but that’s still keeping the content area normal, centered on the screen and then just a wider…yeah, full header.

And what do you mean by full width header? You mean something that stretches from one side of the window to the next or…

Yeah exactly.


Is that your screen? Just on top of the page and then the same a bit for the footer that you have… yeah that for the entire frame and the…

So something like this where the header stretches all the way across and the footer stretches all the way across but the content is essentially the width of the page.


Okay so some of this requires you to provide some custom code at the moment. I’m writing some plugins to make this easier but they aren’t ready yet. But the place you start off from is in Thesis Design Options… I’m sorry, let’s see, let’s go there. I think it’s either Design Options or Site Options. Yeah, I think it is Design Options. Where are you? There you go.

You’re going to start off with the site layout and HTML framework. And right now, what my site, BYOB Website is using is the page framework but you would want to use the full width framework. And the reason why you pick the full width framework is because what it does is it creates an HTML element that spans the entire width of the window called header area, content area, and footer area. So it creates this 3 HTML structures that do that and then inside of each one, it adds a .page and the .page is regulated, its width is regulated by the page width that you define when you define you know, your column widths. When you specify column widths here, that’s what ends up defining your page width. And so the page width inside of the header area, inside of the content area, and inside of the footer area are each governed by the page width that you define inside of the columns in site layout.

However, behind those or containing those is another HTML structure which spans the whole width. So you can then, for example, in this case is add a background image to header area and it will go from window edge to window edge whereas, if you put the background image in header area .page, it would only span from edge of the page to edge of the page. And I have videos showing you how to do this in let’s see, it’s in intermediate tutorials in the Build AneCommerce Website and it’s under… I think it’s Lesson 12. No it isn’t, I’m sorry. It actually starts off with Lesson 9, Styling the Full Width Framework and in that case, you do the background images for the header and for the footer. And then in Lesson 11, you actually create the widgetized areas for the footer and these lessons are how this page was created. This is the site that is created in the Build AneCommerce website tutorials. So Lesson 9 and Lesson 11 are good places to go for how to create those things.

One other place to look though, if you click on Video Lessons and then come over to the full Intermediate Tutorial list and look at Customizing Thesis, under the full width framework, there is some more stuff in here about how to use the full width framework. And then also, under Customize Thesis Like a Pro, there’s a fairly extensive lesson on using background images, tiling them and using fixed images and that sort of thing. And so, that’s is how you create this appearance of this stripe is this is just a background image that repeats itself you know, across the width of the window. The same thing is true with this. I think these background images are only 10 or 20 pixels wide you know, and start here and go down to here and they just get repeated all the way across the bottom and across the top.

So to see exactly how to create these, you look at Lessons 9 and 11 of Build an eCommerce Website and to get more of a background on it you know, look at Lesson 4 in Customize Thesis Like a Pro and then look at some of the other lessons like you know… actually, there’s quite a bit under header also under this topic of customizing Thesis and then header and then full width framework. That’s probably the best place to go.

One short question, on that full width, does it matter from a performer’s perspective is just for styling whether to use full width or the other one?

It’s just for styling. The difference between the full width framework and the page width framework which is what this is is that the page width framework has only one structure here, one HTML structure. Well, actually it has 2 of them but they are the same size by definition in Thesis. It has container and it has page and that sits automatically in the middle of your window whereas this creates 3 containers each with its own subcontainer, the header area, the footer area, and content area. And then the subcontainer is footer area .page, content area .page and footer area .page.

And so those are the… and the only purpose for it is so that you can divide your page up horizontally and have different graphics you know, across the top, across the bottom, and in the middle.

Okay, with the videos, I’m sure I can figure it out.

Okay. And if you… you know, in the next few weeks, I will be… I’m actually getting ready to send out for testing my Thesis footer widgets plugin which will allow you to create you know, a widgetized footer area without having to write your own code. And when I’m finished with that one, we are going to be doing a background image as one that will allow you to you know, insert background images into lots of different places, not just a header and footer but in a variety of different places. Again, without having to use the code and when those are ready, you’ll see those under Member Benefits plugins.



Thanks a lot.

Great. Well, thank you for joining and I guess it’s nighttime in your direction.

No, we’re 9 hours ahead of you so it’s 6 o’clock. It’s late.

Oh okay. Well, enjoy your evening.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment