Organica comes with some amazing flexibility as you can see from the demo site. There are two main layouts - the frontPage layout and the subPage Layout. Within the subPage layout you get full control over the positioning and the widths of the four columns that are available when the subPage layout is triggered.

Setting the overall width

The width of thecontainer on the sub pages is set in the template administrator in Joomla 1.5 and the index.php file in Joomla 1.0. You can choose to set either a % or a px width depending on your needs. When doing this you need to make sure you obey the instructions below for setting the widths of the columns.

Percentage widths can have variable results at different screen resolutions so make sure you double check your settings on the front end of you site to make sure the columns dont slip below each other at low screen widths.

Controlling the four columns

The order in which the columns are displayed are controlled by the layout variable in the template administrator. Combined with the width setting below these layout options mean that you can have any layout variation you want - no more limitations!

The code below gives you an idea of how the columns are rendered according to the layout you have chosen.

$layout = "4";
// Layout 1 = MainBody | Left | Inset | Right
// Layout 2 = Left | MainBody | Inset | Right
// Layout 3 = Left | Inset | MainBody | Right
// Layout 4 = Left | Inset | Right | MainBody

The settings for the widths of the four columns are set in the administrator area of the template in Joomla 1.5 and the index.php file in Joomla 1.0. The widths are set via percentages which gives you the ultimate flexibility in the way that the columns span across the page. There are three groups of width settings depending on the number of columns published on a particular page (see below).

// To compensate for padding and margins the numbers below need to total not more than 86%
$col1Width = "10%";
$col2Width = "10%";
$col3Width = "20%";
$col4Width = "43%";

Multi Column Flex

Organica is set up to allow you to have a different number of columns per each page, which means you can have pages that have a more dense layout with 4 columns or go for some minimalism and only display one column. The template itself does all of the heavy lifting so you just need to publish the modules you want to use to specific pages and Organica will do the rest.

In the template administrator in Joomla 1.5 and the index.php file there are a group of three column widths available for you to set. The three groups relate to the pages that have two, three or four columns published. You still need to obey the rules for the columns widths as described above. If you do not have any modules published to the left, right or inset positions then the template will just display your content in fullwidth mode.

Here are some screenshots of organica in three column mode.

An example of setting up Organica to use three columns

Here is a step by step process for creating a three column layout with only the left and right module positions.

1. Make sure that you have at least one module published to the left and right position.
2. Select the layout option in the template administrator - in this example we will select layout1 - which will output the modules and content as follows: main content | left | inset | right. In this instance the inset column will collapse because there are no modules published to this position.
3. Nominate the widths you want for the display eg The col1 width relates to the main content body, col2 relates to the left module position and col4 relates to the right module position. In this instance col3 has no bearing because the inset position does not have any modules published to it.

As you can see its incredibly easy to create your own layout by changing a few simple options.

As always you need to be careful with the widths you use and match it across multiple browsers - ie6 Im looking at you!