Layouts are placed in the layouts/ sub-directory of the Omega theme or any sub-theme. Omega provides several layouts: divine, off-canvas and simple. The Ohm demonstration sub-theme also provides a layout: hero.

Sub-themes inherit layouts from the base theme and can declare also their own layouts. (This does mean that you must choose a new name for your new layout to avoid unexpected results.)

Creating a new layout

The easiest way to create a new layout is to copy and adapt an existing layout. In this example, we will create a new layout named griddle from Omega's simple layout.

A layout is comprised at a minimum of this set of files:

layouts/simple/preview.png
layouts/simple/simple-layout.tpl.php
layouts/simple/simple.layout.inc
sass/layouts/simple/simple.layout.scss

1. Copy the directory structure and files from the Omega theme and paste it into your subtheme. Rename each directory and file to fit griddle. After that, it will look like:

   

2. Open up the griddle.layout.inc file in a text editor. Look for the line that contains template = simple-layout it should be referencing the original source layout. Change the simple-layout layout name to your new layout name. In our example, that would be template = griddle-layout. While you're editing this file, change the name = and description = lines to match your requirements. It will make selecting a layout easier to do in the layouts extension panel.

3. Once the layout is in place, you need to compile the sass in order to generate the related css file. That is, run compass compile from within your sub-theme directory. If you missed that, visit the section Setting up a proper front-end development stack in order to get up and running with Sass.

   In case you prefer to work directly with css instead of Sass you may want to also copy css/layouts/simple/simple.layout.css from Omega to your sub-theme, renamed as css/layouts/griddle/griddle.layout.css, and work on this file. This approach is not recommended. See below for more info.

What these files do

griddle.layout.inc

Provides some basic info about the layout, and lists layout regions.
You may add, remove, or rename regions here. For example, a new Postscript region would appear like this: regions[postscript] = Postscript.

If adding a new region or changing region names, you must also have a matching region in both the subtheme.info file and the griddle.layout.inc file.

griddle-layout.tpl.php

Is a page template for the layout. As mentioned above, once you have defined your region in the griddle.layout.inc, make sure it is also represented in this file in the order desired.

griddle.layout.sass

This is a Sass file that generates the css that actually builds this layout. It uses a layout framework called Susy and the Sass library Compass.

Learning how to build your layout with these tools is not required but is recommended as it will streamline your entire process. However, you could choose to skip Sass and hand-write your css layout markup, as commented above.

Pro tip: If you're familiar with Sass and getting acquainted with Susy, it can be very helpful to turn on the debugging grid backgrounds like this:

  @include susy-grid-background

or use this shorthand if you converted the file from .scss to .sass:

+susy-grid-background

You will want to do this under each at-breakpoint to see the different grids take effect.

Applying Layouts to different pages on your site

See Extensions: Layouts section.