Layouts are placed in the
layouts/ sub-directory of the Omega theme or any sub-theme. Omega provides several layouts:
simple. The Ohm demonstration sub-theme also provides a layout:
Sub-themes inherit layouts from the base theme and can declare also their own layouts.
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
A layout is comprised at a minimum of this set of files:
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:
- Open up the
griddle.layout.incfile in a text editor. Look for the line that contains
template = simple-layoutit should be referencing the original source layout. Change the
simple-layoutlayout name to your new layout name. In our example, that would be
template = griddle-layout. While you're editing this file, change the
description =lines to match your requirements. It will make selecting a layout easier to do in the layouts extension panel.
Once the layout is in place, you need to compile the sass in order to generate the related css file. That is, run
compass compilefrom 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.cssfrom 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
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
- 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.
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:
or use this shorthand if you converted the file from .scss to .sass:
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.