Content layout options

This theme allow you to choose the best layout for your content.

Blog layout

The default page is the standard layout used for content pages. It contains a content section and a sub-navigation. This layout can be reversed to display the content and sub-navigation on either side depending on your preference.

Layout with right sidebar
<div id="wrapper">
  [...]
    <div class="sidebar">Sub-navigation here.</div>
    <div class="content">Your content here.</div>
  [...]
</div>
Layout with left sidebar
<div id="wrapper" class="left-sidebar">
  [...]
    <div class="sidebar">Sub-navigation here.</div>
    <div class="content">Your content here.</div>
  [...]
</div>

Full width layout

The full page layout uses the full width of the content area. It does not have a sub-navigation or widget making it a good choice for portfolio pages.

This layout only requires a single div tag with the class "fullwidth".

Two Column layout

Requires two div tags with the class "one_half".

<div class="one_half">First content column.</div>
<div class="one_half">Second content column.</div>
<br class="clear"/>

First column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.

Second column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.


Three Column layout

Requires three div tags with the class "one_third". The order the tags are entered in the code determines the order of appearance on the page.

<div class="one_third">First content column.</div>
<div class="one_third">Second content column.</div>
<div class="one_third">Third content column.</div>
<br class="clear"/>

First column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.

Second column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.

Third column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.


Four Column layout

Requires four div tags with the class "one_fourth". The order the tags are entered in the code determines the order of appearance on the page.

<div class="one_fourth">First content column.</div>
<div class="one_fourth">Second content column.</div>
<div class="one_fourth">Third content column.</div>
<div class="one_fourth">Fourth content column.</div>
<br class="clear"/>

First column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.

Second column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.

Third column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.

Fourth column

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.


Combinations

Two Thirds

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.

One Third

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas.


<div class="two_thirds">Two Thirds</div>
<div class="one_third">One Third</div>
<br class="clear"/>

One Fourth

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat.

Three Fourths

Nunc luctus, sapien in dignissim pretium, turpis lectus rutrum elit, at blandit dui nisi eu odio. In porta facilisis libero, in mollis mi vulputate ut. Proin sed lectus at mauris porta auctor fringilla vehicula erat. Vivamus convallis rutrum est sed aliquam. Etiam tristique aliquet egestas. Mauris ultricies feugiat massa, sed semper velit pretium malesuada. Duis arcu magna, sagittis blandit tristique a, luctus sit amet quam. Maecenas in risus urna. Aenean placerat tempor massa et egestas. Nulla ut tortor ac sem consectetur fringilla eu facilisis nisi.


<div class="one_fourth">One Fourth</div>
<div class="three_fourths">Three Fourths</div>
<br class="clear"/>