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.
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.
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 🙂
If you’re not already using Thesis your can find it here.