Thesis 2.0 Guide – Full width Framework

Thesis 2.0 Guide – Full width Framework

Thesis 2.0 has been rockin the world of wordpress but some people miss the full width framework, this isn’t because Chris removed this feature, it’s because you need to make a few adjustments. Thesis 2.0 has the greatest level of control over your layout than any other theme out there.

So this tutorial is going to show you how to adapt the classic theme to a full width framework.

Let’s begin

Full Width Framework

This tutorial focused on making the header and footer full width, but keeping the content fixed in the centre of the page.

Watch this video to see how.

To show you visually I have included some screen shots for you to reference.

The overall HTML layout should look something like this.

Remember that you need to assign a class to your fixed width container.

Once you have the above and your content inside your fixed width containers then hit the save button and head over to the CSS editor.

Create a new package called Fixed Width and add the following to the input boxes.

In the options tab you need to set the width to the same as your container and add auto to the margin left and right.

Once You have done that, then we need to add it to our reference sheet.

Remember what you add to the reference sheet must be the same as the reference of the package and you can see that by looking at the package you created.

I hope this has been helpful to you, if you would liked this post please share it and if you want more subscribe to the blog and receive all the Thesis 2.0 tuts straight to your inbox.
Don’t have Thesis check it out here

About the Author

Matthew Horne - Web Developer

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

88 comments… add one

  • Suzanne Simone January 7, 2013, 4:55 am

    Hi Matthew, love the tutorial and thank you. I cannot figure out how to anchor the header and footer in full width. Thoughts?

    • Matthew Horne January 7, 2013, 5:05 am

      Sure, whats the site in question so I can take a look at the html and css.

      • Suzanne Simone January 7, 2013, 5:08 am

        it’s me again :) – naturallystunning.com

        • Matthew Horne January 7, 2013, 5:11 am

          Ok the first thing you need to do, is move the header and footer inside the container which you have labelled full width.

          So for example the header will be,

          Full width
          —- header
          ———-header image
          ———-nav

          Once you have both the header and footer inside the full width container I will give you the css you need.

          • Suzanne Simone January 7, 2013, 5:17 am

            So to confirm, two separate containers (both named full width), both in the body with the header content in one and footer content in the other. Yes?

          • Matthew Horne January 7, 2013, 5:18 am

            Yes thats correct.

          • Matthew Horne January 7, 2013, 5:19 am

            Then you want to change the width of the css for the full width to 100% and the width for the containers header and footer to 960px and set margin to 0 top and bottom and auto left and right.

          • Suzanne Simone January 7, 2013, 5:25 am

            Sigh, I did everything and double checked but it’s not working.

          • Matthew Horne January 7, 2013, 5:27 am

            Its full width to me, the containers that both the header and footer are in are full width. Are you wanting the actual content inside to be full width also?

          • Suzanne Simone January 7, 2013, 5:30 am

            My goal is to try to anchor the header so it doesn’t scroll up and only the posts scroll.

          • Matthew Horne January 7, 2013, 5:31 am

            ah, so you want to fix it in place to scroll with the page, is that correct?

          • Suzanne Simone January 7, 2013, 5:33 am

            Yes, fixing it in place would be perfect.

          • Matthew Horne January 7, 2013, 5:36 am

            Can you find me an example so I know I have got this right, it seems like a large area to fix in place.

          • Suzanne Simone January 7, 2013, 5:39 am
          • Matthew Horne January 7, 2013, 5:43 am

            OK yes, thats what I was thinking of, I think doing this with the footer would be good, but I think the header is too big to fix in place like that, it would leave very little room to view content, especially on small screens.

          • Suzanne Simone January 7, 2013, 5:46 am

            I was just thinking that when I saw the example again. I’ll use it for another site that I’m working on that won’t have such a large header area. Thank you, again.

          • Monakah January 16, 2013, 12:04 am

            I really like it the way it is now, I wouldn’t have the top fixed either. Looks great!

          • Matthew Horne January 7, 2013, 5:48 am

            For the footer, add a bottom margin of 225px to #container

            Change the class for the full width in the footer to full_width_footer

            and add this CSS to additional css for the full width, or in custom css.

            .full_width_footer {
            bottom: 0;
            position: fixed;
            width: 100%;
            }

          • Suzanne Simone January 11, 2013, 4:06 am

            Hi Matthew, I removed the background color and the footer is not showing in full width. I confirmed all of my margins and widths but it is still not working. Can you take a look again? I don’t want it to stick after all – just to be full width. I’ve been ready to pull my hair out to fix this…argh!!

          • Matthew Horne January 11, 2013, 4:51 am

            What is the background suppose to be like?

          • Suzanne Simone January 11, 2013, 5:17 am

            I like how your footer goes all the way across the bottom of the page where mine is stopping short

          • Matthew Horne January 11, 2013, 5:51 am

            to do that you need to set the background of body, and then change the content and header background accordingly, this will make the footer background fill out no matter what.

          • Suzanne Simone January 11, 2013, 4:14 am

            Hi Matthew, I removed my background color and now my full widths are not working. I confirmed the widths and margins of all boxes and they seem correct. I don’t want them to stick – just be full width. I’ve been pulling my hair out for two days trying to figure this one out….argh!

  • Monakah WhiteWolf Reign January 16, 2013, 2:04 am

    Hi Matthew!

    I just used this tutorial to start the very beginnings of my thesis site. I made a bit of a change as I’m trying to have a nice banner I’m designing going across as the header. To avoid having white space on the edges of the banner on bigger screens and zoomed out browsers, I figured I should have another layer below with a repeating background image. So what I did was removed the “fixed width” container that I had made during this tutorial and instead added a different container for “Header Banner” and nested it inside the “Header” container, similarly to the way we did with the “fixed width” container. I made it a width of 1366px.

    I noticed though that the header banner container was slightly shifted over to the right, causing a horizontal scroll bar to appear. I went into the “Header” element styles to remove any margin/padding that was on there to get rid of the indent and it worked. Unfortunately, the header banner container is not centered anymore when I zoom out and it stays to the left of the page.

    So I have two questions… how do I make sure the header banner stays centered?

    And another question… is there a way to prevent the horizontal scroll bar from appearing on a screen that is less than 1366px wide?

    • Monakah WhiteWolf Reign January 16, 2013, 2:09 am

      Okay, I just went through this video again and realized I have to set the margins for the new container to auto for left and right to center it… it worked lol

      Long day, my apologies. But I’m still wondering about how to prevent the horizontal scroll bar from appearing on a screen that is less than the width I set for my container?

      • Matthew Horne January 16, 2013, 5:39 am

        No problem, glad it all worked out. :-)

        • Monakah WhiteWolf Reign January 17, 2013, 5:41 pm

          I’m still struggling with preventing the horizontal scroll bar from appearing on a screen that is less than the width I set for my container. Any idea how to do this?

  • Claire Doyle Ragin March 11, 2013, 7:34 pm

    Thank you so much! Could not figure out how to do this in Thesis 2.0, you saved me hours of fussing.

  • Joe May 30, 2013, 11:01 pm

    Hey, thanks so much for that great tutorial! Being kind of a newbie to HTML and CSS, Thesis was a little above my knowledge base. The methods described in your video worked perfect and now I’m a little less intimidated by Thesis 2.0. Thanks again for you help and I’ll probably subscribe to your channel for further instruction.

    • Matthew Horne May 31, 2013, 6:31 am

      No problem Joe, I assure you that 2.1 is much easier, but I also guarantee that if you work with thesis you will become an all round better web owner/manager.

  • Stefani Harris September 17, 2013, 4:23 am

    Hi Matthew,

    Excellent tutorial! Thank you! I just (today) finally made the switch to 2.1. This tutorial rocked…but I just have a couple of questions:

    1. My content area is in the center of the screen, but my header and footer are still flush to the left. How can I get them centered as well? I did put the right and left margins as auto, but that seems to only take care of the content area.

    2. When you the part about adding &fixed_width to the “reference sheet”, 2.1 looks a little different. There isn’t a
    reference sheet like the one you are showing. So, am I missing a step from not having that reference sheet or is it just different in 2.1?

    Thank you so much!

  • Tad January 19, 2014, 3:13 pm

    Hi Matt, I’m curious about one thing (I’m a newbie).. I see your tutorial recommends creating a new package. When I was in Thesis, I noticed this message under Packages: “Attention! As of Thesis 2.1, Packages are considered deprecated, and we no longer recommend installing or using them. New Skin design options have rendered Packages obsolete, and the current plan is to phase them out of Thesis by version 2.2.”

    Do you know what they mean by this? Can I still add the package that you mentioned via Skin Editor CSS function? What will happen to it once they “deprecate” the package function? Thank you.

    • Matthew Horne January 20, 2014, 6:36 am

      Packages are deprecated – which means they are going to be fully removed in 2.2

      I will be updating tutorials on this site once I get some free time.

Leave a Comment

PSD Conversions

Get started on your website today by hiring a professional developer who understands the needs of today's web. Optimized coding standards for PSD to WordPress conversions.

Contact Now!
Back to Top