Last updated March 25, 2014. Created by banghouse on March 8, 2013.
Edited by jacobson, jonhattan, Kyle Skrinak, hamuchen. Log in to edit this page.

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.

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:

    Griddle Layout

  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.

Susy grid background

Applying Layouts to different pages on your site

See Extensions: Layouts section.

AttachmentSize
griddle-layout.png147.96 KB
Susy grid background.png48.93 KB

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

What about the css directory?
after creating a sub-theme i have a few files in my css/ directory hack.css, reset.css, styles.css

You must copy all of these to your new sub-theme:
css/layouts/simple
layouts/simple
sass/layouts/simple

Then change all 'simple' to 'newname'...or whatever you named your sub-theme.

If you miss the css/layouts/simple directory, you will notice that the site immediately spreads to the entire screen width upon activation of the new layout.

Mark A Losey

thanks for the quick reply, It did not make a diffidence if i add the css/layouts/simple in css directory, I did not see the width spread the entire page.

could it be that this documentation is old?

when i create a new theme in command prompt "drush omega-wizard" ,

In head is see reference to
css/hacks.css
css/reset.css
css/style.css

I also see the same files in "sass" directory
partials/
hacks.scss
reset.scss
style.scss

when i create a new sub-theme in command prompt "drush omega-wizard" I would assume that the correct file structure would be created..

do you know anything about susy?
in command prompt what directory to i need to cd in in order to "compass watch"

or do i just start editing the styles.scss?

If you miss the css/layouts/simple directory, you will notice that the site immediately spreads to the entire screen width upon activation of the new layout.

But if you compile your layout's sass files with the command: compass compile in your subtheme folder, that will create the folders in the css directory and the css file for your layout, and your page/layout wont break.

If you are using Sass, you need only copy the Sass directory. Once you compile the sass, it will create the css directory and css files for you. If you are not using Sass, then you only need to copy the CSS directory.
Learn more about setting up Sass here: http://sass-lang.com/tutorial.html

You can also just go into your sub-theme then run > guard , if you have it installed.

I noticed the spreading issue as well, because it is vitally important to give the exact names inside the [your-theme-name].layout.inc, both for template = [your-theme-name] and stylesheets[all][] = css/path/to/your/layout's/css. Once the correct name, in its entirety was set, this issue went away for me...

In step one, the screenshot shows quad/sass/layouts/griddle/griddle.layout.sass, assuming that quad = omega subtheme, correct?

In step two, the bulletted list says to create the sass file that will be associated to the custom layout, griddle. This file, based on the first bullet point, would reside directly in the sass directory.

So: [subtheme]/sass/layouts/[custom-layout]/[custom].layout.sass vs. [subtheme]/sass/[custom].layout.scss

Which is the correct path?

Also, noob question but - does it matter if the file is .sass or .scss?

Thanks!

The subtheme is Quad, yes. Please see this comment for .scss vs .sass: https://drupal.org/node/1936980#comment-7784151

Yes, [subtheme]/sass/layouts/[custom-layout]/[custom].layout.sass is the correct path.

Should this read:

newlayout.layout.sass is a SCSS file that generates the CSS which actually builds this layout. It uses a layout framework called Susy and the SASS library Compass.

or

newlayout.layout.scss is a SCSS file that generates the CSS which actually builds this layout. It uses a layout framework called Susy and the SASS library Compass.

You can use either extension. They are two different syntaxes for Sass. The .scss extension means you must use brackets and semicolons just like with regular CSS, but with the .sass syntax you don't need the extra punctuation and you use whitespace to indicate nesting. http://sass-lang.com/

Yep, I'm aware of that, but the files in the Omega 4 project are all .scss files (I think), so I'm asking whether this is a typo.

so when i'm using layouts and create a new new layout e.g. "basic", i can place a basic-layout.tpl.php file, which is basically the page.tpl.php file in this folder. but what about the node.tpl.php file and also custom node.tpl files for different content types. where do i place them?
The "templates" directoy, where these files usualy go, is only working when layouts are disabled?

**Update**
Works just fine, had no node-content on the frontpage.
so, as i see, placing the node.tpl in /templates/node works fine.

Hi,

Following this guide to create a new custom layout was easy, but for some reason it won't show up in the layouts I can select. In appearances -> settings, I can only select the four standard ones from Omega (simple, off canvas, divine, hero) How do I make my layout show up here to select it?

And if I have two layouts, say a different one for the front page.. how do i changei t just for the front page?

When I copied the hero layout from the ohm theme, I was a bit puzzled why it wasn't displaying. For me it was simply permissions of the folders and files.

I knew this because I had successfully created a layout from scratch and it displayed in the theme.

chmod 755 the following folders (foo being your name):

layout/foo
sass/layout/foo

All the files within I set chmod 644:

layout/foo/*
sass/layout/foo/*

Not sure if this is the correct permissions but it works for me