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

Meet the Author

Matthew Horne

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
  • KJ Oct 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

    • Matthew Horne Oct 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.

  • Clarence Johnson Oct 10, 2012, 3:45 am

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

    • Matthew Horne Oct 10, 2012, 1:33 pm

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

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

  • Mark Salmon Oct 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

    • Matthew Horne Oct 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.

      • Mark Salmon Oct 10, 2012, 6:01 pm

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

  • Mark Salmon Oct 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.

    • Matthew Horne Oct 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 https://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.

      • Mark Salmon Oct 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.

        • Matthew Horne Oct 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.

  • Lindsay Oct 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 🙂

    • Matthew Horne Oct 12, 2012, 10:49 pm

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

  • Tim Oct 13, 2012, 3:35 am

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

    • Matthew Horne Oct 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.

  • Bryan Oct 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

    • Matthew Horne Oct 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 🙂

      • bryan Oct 14, 2012, 3:55 pm

        ahhhhhhhhhh…..now I get it. Thanks!

        • Matthew Horne Oct 14, 2012, 7:37 pm

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

          • Bryan Oct 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 Oct 14, 2012, 9:51 pm

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

  • Bryan Oct 14, 2012, 9:53 pm

    The page that this post is on.
    b

    • Matthew Horne Oct 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 🙂

    • Matthew Horne Oct 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. 🙂

      • bryan Oct 14, 2012, 10:47 pm

        Thank you!!!
        b

  • Aizaz Oct 15, 2012, 1:55 am

    Thanks for a helpful and quick tutorial! Appreciate it 🙂

  • Sarah Oct 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!

    • Matthew Horne Oct 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.

    • Sarah Oct 15, 2012, 5:21 pm

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

      • Matthew Horne Oct 15, 2012, 5:28 pm

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

  • David Alexander aka Pixelloop Oct 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.

    • Matthew Horne Oct 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.

      • Tim Oct 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

        • Matthew Horne Oct 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.

          • Tim Oct 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 Oct 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!!

    • Matthew Horne Oct 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.

  • Puneet Sahalot Oct 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.

  • Kunal Nov 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!

    • Matthew Horne Nov 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.

  • Paul Nov 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.

    • Matthew Horne Nov 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.

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

    • Monakah Jan 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

  • Ryan Nov 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.

  • DJ Rony Nov 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.

    • Matthew Horne Nov 13, 2012, 2:30 pm

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

  • zak Nov 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

    • Matthew Horne Nov 16, 2012, 4:56 pm

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

Leave a Comment