The site layout controls on the Design Options page in Thesis offer the ability to completely change the layout of your site whenever you want.
You can select the number and positioning of your columns (content and sidebars) and choose your page framework (full-width or page) just by selecting a few options.
When you use these controls along with the Fonts, Colours and More controls that I wrote about here, you can completely change the appearance of your site without having to install a new theme.
Site Layout – HTML Framework
Clicking the ‘ + ‘ sign next to HTML Framework will bring up this screen offering you the choice of page or full-width frameworks:
Here’s the difference between full-width and page frameworks: this site uses the page framework and this site (that you’re reading now!) uses the full-width framework.
The visual difference is in the header and footer areas (scroll to the top or bottom of this page), which stretch right across the page when you use the full-width framework.
The main difference you’ll find when planning colours and layout is that with the full width framework you don’t define a site background colour in the Body and Content area.
The full-width framework makes the three primary sections of the page (header area, content area and footer area) extend the full width of the page.
This diagram illustrates the difference between the page and full-width frameworks:
So defining the background colour for the main part of your page with the full-width framework is done in the content_area div, which you’ll need to declare in your custom stylesheet.
You can then define the background colours of your content box and sidebars (where all your content goes) separately, to differentiate them from the main background colour.
And you’ll need to do this in your custom stylesheet too.
Alternatively you can have everything the same colour, as I’ve done here.
Full Width vs. Page Frameworks
The page framework is the default option in Thesis. Therefore, you can achieve more with the options in the Fonts, Colours and More section when you use the Page framework than you can if you’re using the full-width framework.
Choosing the full-width framework will mean you’ll need to use the custom stylesheet more extensively.
Outer Page Padding
You can only use the Outer Page Padding option if you’re using the page framework.
The Outer Page Padding defines the amount of white space that surrounds your main content box.
I’ve used it on this site to create that white space above the header, below the footer and to each side of the main content box.
If you’re using the page framework the default setting is 1.0, but you can select a different size or de-select it altogether (select 0.0).
Site Layout Columns
The layout columns section allows you to define how many columns you want on your site and the individual width of each.
You have a choice of between 1 and 3.
Only one of them will be a content column but, if you wanted a second column to act as a content column, you could make one of the sidebars equal in width to your content column and use a text widget to create your extra content.
Note, though, that you’d need to define your content in the text widget in HTML, and it would be static.
The more usual approach is to have your content column the widest and either one or two narrower sidebar columns.
If I’d selected 3 columns from the drop down menu in the image above, I’d be presented with boxes for the Content, Sidebar 1 and Sidebar 2 columns, in which I’d define their individual widths
Being able to select the individual width of each column gives you the flexibility of having one wide sidebar into which you could embed videos, and a narrower one, in addition to your content column.
Remember that if you’re using a header graphic you’ll have to correlate the total width of your content box, which is driven by the widths of the individual columns, with the width of your header graphic.
Column Order
In the Column Order section you can select how you want to position your content and sidebar columns in relation to each other.
Because I only selected 2 columns in the previous section I’m only offered options for a two-column layout in this section.
If I’d selected three columns previously I’d be presented with more options here.
Simply click the radio button against the layout you want.
Custom Stylesheet
The final section in Site Layout is the custom stylesheet section:
This simply activates the custom stylesheet, which you will definitely need to do if you choose the full-width framework!
Checking the check box will activate the custom stylesheet. I covered the custom stylesheet in a separate article here.
OK, that’s it for the site layout options. If you need any clarifications leave me a comment and I’ll clarify 
Cheers,
Your details are safe with me.
My Privacy Policy.
{ 10 comments }
Thank you for the illustration. I am trying to learn thesis and thinking if it would boost my website’s ranking if I use Thesis theme.
Ronald, hi,
There are two things about Thesis that will help your site’s ranking:
1) It speeds up your site load time because of the efficiency of its coding
2) It has very focused SEO controls that enable you to set META tags sitewide, article by article, page by page, category by category and tag by tag.
However, nothing can substitute good content!
Cheers,
Martin.
Excellent article. It took me hours to find this info. Thanks so much for posting it!
Janeth, hi,
Glad it was helpful – if you need any clarifications let me know
Cheers,
Martin.
I will be redesigning my blog site and this really helps so I will know where to edit or make changes on what I wanted my site to look like
Hoping it will be more fun and less time to consume.
Hi,
any ideas on how to get the multimedia box to sit below the sidebars when using a content-sidebar-sidebar layout? I can’t seem to find info on this anywhere…!?
Thanks,
L
Hi Leigh,
You’d need to use the custom functions file to remove the MM box from the
thesis_hook_before_sidebarshook and place it in thethesis_hook_after_sidebarshook.This code should work (in your
custom_functions.phpfile):remove_action('thesis_hook_before_sidebars', 'thesis_multimedia_box');add_action('thesis_hook_after_sidebars', 'thesis_multimedia_box');Important: Be sure to take a copy of your
custom_functions.phpfile before making any changes and also make sure you have FTP access to it so you can restore it.If something goes wrong a Fatal error will be created and the only way to restore access to your site will be to upload the saved copy of your file.
Cheers,
Martin.
Hi Martin,
thanks for the speedy response! I just incorporated that bit of code but to no avail… I’m sure it’s something to do with user error rather than the code so shall persist!
With the bit of code you (very generously!) provided, I now have two multimedia boxes, one above and one below the sidebars… which could work I guess… not sure why the ‘remove’ action hasn’t worked though? Any thoughts?
Cheers,
Leigh
Hi Leigh,
Hmmm – don’t know about that
I saw you’ve removed the code, so try setting the MM box to ‘do not use’ in the Design Options screen and then adding the ‘add_action’ line to your
custom_functions.phpfile.If that doesn’t work then I think a visit to the Thesis forums may be the best route.
Cheers,
Martin.
Thanks Martin,
I tried fiddling with it but, alas, ’tis still not working. I either have two boxes or none! I shall head over to Thesis forums to see if anyone’s having the same problem.
Thanks for trying!
L
Comments on this entry are closed.