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

Thesis 2 Tutorials

Leave a Comment

Current month ye@r day *

Comments

  • KJ October 9, 2012, 6:55 pm

    This is why I like the Thesis software so much, there’s a real community spirit from it’s users; who put so much time and effort into producing quality content like this to help others.

    Thanks Matthew for another excellent guide to using Thesis 2.0

    Reply
    • Matthew Horne October 9, 2012, 6:58 pm

      Thank you, working on another box now which I think people will love, my feature box on the home page.

      Reply
  • Clarence Johnson October 10, 2012, 3:45 am

    Thank YOU so much for this. I was searching for this solution this past weekend.

    Reply
    • Matthew Horne October 10, 2012, 1:33 pm

      No problem glad it was helpful to you. Looking forward to writing more about this amazing framework.

      Reply
  • Campbell October 10, 2012, 6:07 am

    Great video tutorial on fixed width framework Matt : )
    Haaha, I see that Coco is enjoying Thesis 2.0 as much as you are Matt.

    I bet Coco is very affectionate towards you isn’t he/she? Parrots are really amazing animals and very loyal friends. What type of Parrot is Coco Matt?

    Reply
    • Matthew Horne October 10, 2012, 1:32 pm

      Yeh, he keeps me company while working, makes me laugh lol

      Reply
  • Mark Salmon October 10, 2012, 5:46 pm

    Hi Matthew,

    I’m a bit afraid about getting in over my head Matthew and spending hours trying to achieve what I can currently do in minutes. You demonstrate great dexterity with the new theme!

    Once you have created the full width framework, how do you put a full width banner in place with the new theme?

    Hope that isn’t a stupid question!

    kind regards

    Mark Salmon

    Reply
    • Matthew Horne October 10, 2012, 5:50 pm

      Dude nothing is a stupid question, only an idiot would say so. If you don’t know you don’t know and that’s why you ask a question.

      You can create a Text box and include your banner inside that, so where you see on my video to create a container, there are other types of boxes, at the bottom you will see one called Text box, then once you open the options for that there is a text input box that works exactly like the wordpress post editor, you can write your own html in there, and this would also be a good place to put the banner html.

      Reply
      • Mark Salmon October 10, 2012, 6:01 pm

        Thanks Matt. I guess I just need to dive in and start swimming.

        Reply
  • Mark Salmon October 10, 2012, 5:58 pm

    Another question Matt.

    I’ve never written a line of code. I would like a simple explanation of the naming convention for the boxes. Is there a uniform code for this and, if not, should there be?

    Liked your brief throw away comment about keeping the CSS organised – seemed like a good tip.

    Could you provide a very simple tutorial or cheat sheet just running through this systematically, slowly and simply for complete beginners with Thesis 2.0 – I want to get off on the right foot rather than creating a big mess because I don’t know what I am doing.

    Reply
    • Matthew Horne October 10, 2012, 6:10 pm

      The next tutorial in this series will focus on CSS and how that links to the boxes you create.

      But to give you an idea, when you open up a box you will see a text box called

      HTML class
      or
      HTML ID

      Then when you got to the css package and open the options up you will see a text input area on the first options page called

      CSS Selector *

      For an id you would use #name
      For a class you would use .name

      So if in the html box i put header in to the id box, I would then put #header in to the css package selector field.
      If I used a class, i would put .header instead.

      To help you understand which to use
      The id selector is used to specify a style for a single, unique element. Meaning it is for one specific box.

      This allows you to set a particular style for many HTML elements with the same class. Meaning it can be used over and over. So for the header, you would use an ID

      For a class, you might create a css package for say a button and give it a class of .button

      With the class button you could edit the package options to create say a border, background, give it some color ect.

      Then if like me on this page http://diywpblog.com/thesis-2-0-logo-box/

      where I have create a style for my download buttons, you can reuse this over and over. So each time I add a download button and wrap it in div class and the text between the div is also controlled by the css package.

      and the result is I can use it over and over like this

      button 1
      button 2

      then I would link the button to where I want it to go.

      Hope this helps you, but I will be going through all this soon.

      Reply
      • Mark Salmon October 10, 2012, 6:15 pm

        Incredibly helpful Matthew. Thank you. I am bookmarking your site in order to follow you.

        I’ve just noticed your Alexa ranking – you are really crushing it! Thesis 2.0 is a great opportunity because there are currently a lot of very confuse people trying to get to grips with this.

        Reply
        • Matthew Horne October 10, 2012, 6:23 pm

          My alexa rank has been low for a while, thesis 2.0 has helped out this week with 30k drop so far.

          Reply
  • Lindsay October 12, 2012, 10:29 pm

    Thanks a ton for this tutorial. Nearly tore all my hair out last week trying to work this out! The parrot and your accent rock too :)

    Reply
    • Matthew Horne October 12, 2012, 10:49 pm

      Lol thanks, no problem, I love writing this stuff to help others out.

      Reply
  • Tim October 13, 2012, 3:35 am

    How about a % width? Say 90% (makes it more fluid)

    Reply
    • Matthew Horne October 13, 2012, 2:00 pm

      You could do that if you require it to be fluid like. Personally for me my site is easy to ready on mobile and so i do not require the site to be fluid.

      Reply
  • Bryan October 14, 2012, 12:29 pm

    Hi Matthew,

    Great stuff…clear and useful. But I’m confused on one thing. The title of the post is “Full Width” but the content is really talking “Fixed Width.”

    Aren’t they 2 different things?

    If you change the background color on the header and footer, for example, will that color extend “full width?”

    bryan

    Reply
    • Matthew Horne October 14, 2012, 12:38 pm

      The content is fixed because it is inside the container, what your seeing here is the header and foot outside the container, so they are full width because they assume the width of the body which is full. But I wanted the content inside the header and footer to be fixed like the content, so I created the full width boxes to put the content inside.

      Hope this clears things up for you :-)

      Reply
      • bryan October 14, 2012, 3:55 pm

        ahhhhhhhhhh…..now I get it. Thanks!

        Reply
        • Matthew Horne October 14, 2012, 7:37 pm

          lol, all makes sense once it clicks, then you realise the flexibility and power of thesis 2.0

          Reply
          • Bryan October 14, 2012, 9:48 pm

            I’m getting there slowly.

            One problem that I just noted, though. If you “restore down” ie: window is not maximized…and then scroll right, both the header and the footer colors end before the page ends.

            Thoughts?
            b

          • Matthew Horne October 14, 2012, 9:51 pm

            I would need a link to the site to see what the problem may be.

  • Bryan October 14, 2012, 9:53 pm

    The page that this post is on.
    b

    Reply
    • Matthew Horne October 14, 2012, 9:58 pm

      oh lol, didn’t notice that, i’ll fix that up, thats not related to the columns, more the min width of the container.
      Well spotted :-)

      Reply
    • Matthew Horne October 14, 2012, 10:23 pm

      Fixed, I totally forgot about that, because most ppl don’t make there browser that small.

      The solution is to add this to your body css package

      body {min-width: 1024px;}

      adjust as necessary. :-)

      Reply
      • bryan October 14, 2012, 10:47 pm

        Thank you!!!
        b

        Reply
  • Aizaz October 15, 2012, 1:55 am

    Thanks for a helpful and quick tutorial! Appreciate it :)

    Reply
  • Sarah October 15, 2012, 5:19 pm

    Hi Matt, thank you for a great tutorial. It’s really encouraging to see how easy it is to style full-width content in Thesis 2.0; I have been a bit apprehensive about getting started but this inspires confidence. I love your parrot – he is very funny!

    Reply
    • Matthew Horne October 15, 2012, 5:21 pm

      You mean Matt lol, I changed it for you. Yes, once you understand the theme and get around the options it becomes super easy :-)

      Lol the parrot just keeps talking all day.

      Reply
    • Sarah October 15, 2012, 5:21 pm

      So sorry I called you Chris! Clearly I meant Matthew. I was sidetracked by the parrot

      Reply
      • Matthew Horne October 15, 2012, 5:28 pm

        thats ok, no worries, my brother is called Chris so it’s nothing new to me lol

        Reply
  • David Alexander aka Pixelloop October 18, 2012, 12:32 am

    Kudos on the tutorial, I was being lazy and instead of experimenting wanted to see how it was done, seems perfectly logical good work. Personally think Thesis 2 is amazing, just going to take some time for the docs etc to all be readily available. Surely the best of the next gen Wordpress frameworks.

    Reply
    • Matthew Horne October 18, 2012, 12:52 am

      Thank you, the Thesis docs will come, the official ones, it would of meant a delay of around 6 months if we had to wait for all the docs, because people want detail. As there is alot of cover. I think it was right to release earlier and let people explore it.

      Reply
      • Tim October 18, 2012, 12:56 am

        Completely disagree.

        Steve Jobs: “Let’s release [hardware/software] with no doco and let people explore it!”

        You can’t release something half-#rsed and buggy with no warning. The launch process has been a disaster. No alpha/beta, no warning to people with minimal tech knowledge about the hazards (look at the broken websites/headaches that have resulted).

        Not to mention lost confidence in the brand.

        So far the response has been “we were right to release it early and you are wrong to think otherwise.”

        Customer is usually right.

        Tim

        Reply
        • Matthew Horne October 18, 2012, 1:13 am

          If that is what Steve Jobs said, then it didn’t do him any harm.

          There was an Alpha with around 100 devs, the fact is, it is very difficult to test everything on ever possible computer set up, server set up etc to find the bugs.

          The only true way to debug something is to get 10s of 1000s of people to do it. We all debug in some way or another, when someone reports something off, they are debugging it.

          All new software is rocky at first, windows, apples new map, the latest iphone. The more complex it is in terms of the backend the greater the chance of a problem occuring.

          My philosophy is that instead of looking for problems to complain about, look for solutions to limit the lifespan of the problem itself.

          You may be right when it comes to the customer being right.

          Problem is not everyone is complaining, many understand the processes involved when working with something new.

          Each time FF and chrome update their browser, people complain.

          When windows updates it OS, people complain, eventually the issues are fixed and life goes on.

          I would rather utilise my time being practical, and help solve the issues which is what I have been doing. It’s not like the guys at DIYthemes are sat back laughing at people, there working very hard, on docs, on bugs, and boxes, skins and other freebies.

          Reply
          • Tim October 18, 2012, 7:34 am

            Appreciate all that, even with the slightly condescending undertone, or at least the excuses (all software is buggy, so it must be ok).

            And I never said anyone was laughing at anyone – not sure where that came from.

            Having said that, it’s not often major releases go out sans doco etc, but obviously it was important to get T2 out there and worry about everything else later, for whatever reason.

            I’m just saying there should have been a bit more warning.

  • David October 22, 2012, 9:32 am

    Hi,

    A lot of blogs these days have a very simple footer with maybe 4 or 5 links (i.e. Subscribe, Contact, User Agreement, privacy policy, etc) with maybe a line or two of text either right above or below those links. Could you explain how to create this using Thesis 2.0? Thanks!!

    Reply
    • Matthew Horne October 22, 2012, 12:01 pm

      This sounds like your talking about a menu in the footer, you would just create a second menu and add it to the footer.

      Reply
  • Puneet Sahalot October 25, 2012, 10:10 am

    Really nice work man! I feel like dropping a “thank you” message on each of your blog post.
    All your posts have been really helpful for the newbies.

    Reply
  • Kunal November 4, 2012, 6:21 pm

    Hi Matthew,

    Firstly, thanks for the tutorial. I followed all the steps you mentioned but for some reason I cannot replicate the full width for the header. Footer managed to work well but the header does not go full width. There’s a clickable header image as well.

    Thanks!

    Reply
    • Matthew Horne November 5, 2012, 1:08 am

      I will take a look for you tomorrow, quite late here now. But if you mimic what you have done in the footer for the header then you should be good. That means the html structure and the CSS.

      Reply
  • Paul November 7, 2012, 12:19 pm

    Hi,
    Thanks for your great tutorials. I’ve done Header and Footer without any issue through your tutorial.
    Now i’m trying to move “Nav Menu” outside into the body. I created “Fixed-Nav
    _Menu” from HTML and CSS. But the problem is that I can’t move “Fixes Nav Menu” into the Nav Menu. As the result the Nav Menu float to the left. Is there any way we can move the Nav Menu into the right place like what I did for Header and Footer?
    Many thanks in advance.

    Reply
    • Matthew Horne November 7, 2012, 1:16 pm

      You would have to set the nav to a fixed width and set a margin to 0 auto to center it.

      Reply
  • Paul November 7, 2012, 9:57 pm

    Hi Matthew,
    Thanks for your advice. I must be misunderstood your direction but Nav Menu bar doesn’t look full width anymore with “fixed width”. What did I done wrong?

    Reply
    • Monakah January 16, 2013, 12:09 am

      If you want the nav menu to be full width, just drop it into your header fixed width container

      Header
      —–Fixed width
      ———–nav menu

      Reply
  • Ryan November 12, 2012, 4:39 pm

    Just wanted to say a big thanks for this article.

    I’ve spent over 3 hours trying to figure out how to do this.

    Read you article and had it all done in 5 minutes!

    Big thanks.

    Reply
  • DJ Rony November 13, 2012, 11:12 am

    Gotta love this Thesis. at first I thought this version has gone far far harder than the previous one. Well, I was wrong. With all the tutorials here and there this is like a breeze now.

    thanks man.

    Reply
    • Matthew Horne November 13, 2012, 2:30 pm

      It will get better and better, as Chris is responding to the users needs and concerns.

      Reply
  • zak November 16, 2012, 2:52 pm

    Hi,
    Thanks for your great tutorials. I can’t move the header and footer outside to the body , I tried but I think I miss something.
    Please some help
    Thanks

    Reply
    • Matthew Horne November 16, 2012, 4:56 pm

      You will have to shift and click to move a container from one container to another.

      Reply
  • 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?

    Reply
    • 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.

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

        it’s me again :) – naturallystunning.com

        Reply
        • 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.

          Reply
          • 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.

          • 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?

    Reply
    • 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?

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

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

        Reply
        • 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?

          Reply
  • 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.

    Reply
  • 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.

    Reply
    • 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.

      Reply
  • 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!

    Reply
  • 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.

    Reply
    • 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.

      Reply

This site rocks the DIYWP Optimized Skin for Thesis & is hosted by Webhostingbuzz