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
-
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.inc
file in a text editor. Look for the line that containstemplate = simple-layout
it should be referencing the original source layout. Change thesimple-layout
layout name to your new layout name. In our example, that would betemplate = griddle-layout
. While you're editing this file, change thename =
anddescription =
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 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 ascss/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.
Attachment | Size |
---|---|
griddle-layout.png | 147.96 KB |
Susy grid background.png | 48.93 KB |
Comments
In step one, the screenshot
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!
subtheme name, layout path
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.
- Kendall Totten
Should this
Should this read:
or
.scss or .sass is acceptable
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/
- Kendall Totten
Typo?
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.
Custom Layouts and node.tpl.php
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.
Won't show up?
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?
Could be permissions
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):All the files within I set
chmod 644
:Not sure if this is the correct permissions but it works for me
nevermind
nevermind
--
Greg
Another reason for layouts not appearing
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.
Clear cache to have a new layout appear.
Yep. Clearing the cache should get it to appear.
Disabling layouts from parent theme?
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
Don't forget to give your cloned layout a new name
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
@include
s for the style files, it can pick up the path of the original layout's css file in stead of thestylesheets[all][]
in the layout's layout.inc file.Hope this saves someone a scratched head!
Seems like this is a bit out
Seems like this is a bit out of date since most of the layouts I see in the project code use Singularity rather than Susy.