Wednesday, August 20, 2014

Drupal - Omega 4.x - layouts - how to create a layout and add a sidebar (or anything)

Lets start with a giant disclaimer - my lawyer advised me thus, to always start with a disclaimer, even if I am just entering a supermarket or visiting a friend for a coffee:
I don't know if all here under is the correct way to proceed.
Adding a layout as shown in the leveltuts tutorials did not work. But I  probably just forgot a step, multiple times, or multiple steps at different times in the process. Anyway, I decided to do some low level cortex manipulation and lo and behold, that worked.
Low level cortex being simple copy-paste and renaming magic.

I wanted a layout with an extra region in it, and it seems that the best way to do that is to add a layout to your omega subtheme. As I am still novicing into the omega 4.x sass setup, I could be totally wrong on this. 

Well, anyhow, here my cookbook:
1. Create  (if not already there) a folder 'layouts' in your omega subtheme folder
(So in my case the subtheme is called rli2015 and the layouts folder in /sites/all/themes/rli2015/layouts)
2. copy the folder simple from your omega base theme to the layouts folder you just created (sites/all/themes/omega/omega/layouts/simple)
3. Rename this folder to what you wanna call your layout.
I called it allpages as I wanted to create a layout I can use over the whole site
3.1 rename the folder to your layout name. In this aexample allpages.
3.2 rename the file to
3.3 rename the file simple-layout.tpl.php to allpages-layout.tpl.php.
3.4 In the change:
3.4.1 name=allpages
3.4.2 description = whatever text you want here
3.4.3 preview= allpages.png (if you want to make an image for this layout, you can also leave it out)
3.4.4 template=allpages-layout
(has to be what you named your tpl file under 3.3)
3.4.5 Stylesheets (you can leave this one out, or simply add an empty one for later use)

; Stylesheets 
stylesheets[all][] = css/layouts/allpages/allpages.layout.css
3.4.6 Add a region under the regions section

; Regions
regions[branding]       = Branding
regions[header]         = Header
regions[navigation]     = Navigation bar
regions[highlighted]    = Highlighted
regions[help]           = Help
regions[content]        = Content
regions[sidebar_first]  = First sidebar
regions[sidebar_second] = Second sidebar
regions[sidebar_third] = Third sidebar
regions[footer]         = Footer
3.5 Also add this region to your inc file under your subtheme itself, in my case
regions[sidebar_third] = Third sidebar
3.6 In your tpl file (allpages-layout.tpl.php) add the region you just added where you want it rendered

<?php print render($page['sidebar_third']); ?>
NB! If there is no content in the region, the region will not be rendered
3.7 Copy the omega/sass/layouts/simple folder to your custom theme sass layouts folder
3.7.1 Rename simple to allpages
3.7.2  Rename simple.layout.scss to allpages.layout.scss (has to be the same as the one you declared under 3.4.5)
3.7.3 Strip it of all its content.
4. Go to admin/config/development/performance.
5. Clear all caches.
6. Go to appearance.
7. Choose the settings of your subtheme.
(in my case admin/appearance/settings/rli2015)
8. Enable layout extensions.
9. Select your custom layout and save the configuration.

After that you have a html output with your extra third sidebar (providing you've added content to that sidebar....)

If you have guard (bundle exec guard) running on your subtheme directory the css file should be automatically created under /sites/all/themes/rli2015/css/layouts/allpages.
If not, add the allpages.layout.css file by hand.

I had the problem that guard (bundle exec guard)
stopped working. It simply did not compile.
Dunno why...
Instead of that I ran compass watch multiple times in the same directory, stopping it with ctrl-c. And after some iterations of that I got messages about changes made. And after that, bundle exec guard also ran again. Dunno why....


No comments:

Post a Comment