Last updated April 26, 2015. Created on March 8, 2013.
Edited by iainH, jacobson, jonhattan, Kyle Skrinak. 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. (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:

    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

Courtney.B’s picture

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!

Kendall Totten’s picture

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.

tonypbarker’s picture

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.

Kendall Totten’s picture

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/

tonypbarker’s picture

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.

rootop’s picture

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.

KeairaM’s picture

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?

antonyanimator’s picture

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

alanom’s picture

I had the same problem of my custom layout not appearing and no changes I made to layouts altering the available layouts list.

I don't know why yet, but for me the cause was that when I was clearing the cache, I was using Drush which claimed to be working ("'all' cache was cleared"), but actually wasn't doing anything. When I cleared the cache using the button on admin/config/development/performance it suddenly worked and my layout appeared.

hturner’s picture

Yep. Clearing the cache should get it to appear.

vefverksmidja’s picture

Is is possible? I'm wondering if I can only see the layout I create in my own subtheme.

Does anybody know if this is possible?

with regards, Vefverksmiðjan

iainH’s picture

It may seem obvious but it caught me out when I cloned the Ohm theme - rather than subtheming it as we are advised not to do for live sites. I also cloned one of Ohm's layouts used the same name Hero rather than MyHero or whatever and Omega generated the links to style files for the original Hero and not my new cloned Hero. I'll edit above to spell it out.

I looked through the Omega code (omega/includes/omega.inc) to discover that layouts' name scopes are not limited to the enabled themes. It's a nice idea to allow subthemes to use the layouts of its ancestors. But it does mean that your new layout must have a new name if you want to avoid unexpected results.

Why? When Omega constructs the @includes for the style files, it can pick up the path of the original layout's css file in stead of the stylesheets[all][] in the layout's layout.inc file.

Hope this saves someone a scratched head!