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 simple.pages.inc to allpages.layout.inc.
3.3 rename the file simple-layout.tpl.php to allpages-layout.tpl.php.
3.4 In the allpages.layout.inc 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 rli2015.inc
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.

NB! GUARD!
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....


.




Friday, August 1, 2014

Drupal 7 - Omega 4.x with Sass - how to add a css to the theme

(this is a post under construction, more or less. I am digging into the omega4 -Sass - theming setup framework. Just rather pissed off by spending two whole days on installing RVM - one of the prerequisites for using Sass - on my mac. Will write a blog about that process, when I don't feel the need for strong langiuage anymore. This is just a post about simple tasks you wnat to perform and which nonody seems to want to add to the documentation. Probably because only fools like me don't know how to perform these simple tasks....)
DPMS Panther LRT-SASS 7.62 NATO



This post supposes you have an omega 4 subtheme installed and the Sass environment set up and you have the guard running on your subtheme folder (bundle exec guard)
(see f.i. http://www.code.binarybrand.com/index.php?title=Omega_4)


1. Open your subtheme info file (in this example my subtheme is called rli2015, so we open  rli2015.info)
2. Add a line in the stylesheets section
 stylesheets[all][] = css/rli2015.mobile.css
3. navigatie to your sass folder (in this example themes/rli2015/sass) and add a file
rli2015.mobile.scss
4. Imediately a file rli2015.mobile.css will me generated in your css folder
5. This css file will also be added to your rendered page