With Drupal Omega 4 theme in beta and they are still working on documentation, using it is a little challenging. So here is a quick run-down of using while developing on a local Ubuntu server. It can also be done using a WAMP with the Compass window tools. Skip all the ubuntu installation through execution of compass watch . command and use the compass apps.
Make sure you have drush installed (and you need latest drush not the old drush that ubuntu install. I found a forum thread that helped update drush to 5.8)
Download Omega 4 (drush dl omega –select and choose the Omega 4 (in beta when this was written)
Using Drush create a child subtheme (http://drupal.org/node/1936948) (Note: I had to make sure omega tools wasn’t enabled otherwise it kept giving me a omega theme not found error.)
Installation of Ruby, Compass, Susy and few Compass packages on Ubuntu
- sudo apt-get install ruby-full build-essential
- sudo apt-get install rubygems
- export PATH=/var/lib/gems/1.8/bin:$PATH
On Ubuntu, I had to update rubygems for the toolkit installs.
- sudo gem install rubygems-update
- cd /var/lib/gems/1.8/bin/
- sudo ./update_rubygems
- sudo gem install bundler
Continue installing packages….
- sudo gem install compass
- sudo gem install susy
- sudo gem install sass (not sure if needed but installed it.)
- sudo gem install toolkit
- sudo gem install compass-normalize
- sudo gem install compass-rgbapng
Change directory to the child subtheme directory (called ‘themename’ from now on.)
Execute ‘compass watch .’ and it will constantly watch for any change in the SCSS files and re-compile it to CSS. So you can styling to sass/styles.scss and after editing, the css/styles.css should be updated automatically.
Basic Setup the Layout and specific css for the layout
- Create a ‘themename/layouts/newlayout’ directory and add 2 files… newlayout.layout.inc & newlayout.layout.tpl.php (http://drupal.org/node/1936980) I copied simple layout for this from the Omega theme and changed the newlayout name to match my themename.
- Create a ‘themename/sass/layouts/themename/themename.layout.css’. (I copied omega\sass\layouts\simple\simple.layout.css)
Adding more CSS
Adding your own css… following another Omega 4 subtheme pattern. I created a ‘themename/sass/themename’ directory and started putting in my own .scss files there. (i.e. ‘sass/themename/_menu.scss’ ) Then in the ‘themename/sass/styles.scss’ make sure you import in that scss file. (i.e. @import “themename/menu”; )
So basically to summarize:
- You work in the ‘themename/sass’ directory to add/modify your css.
- layouts/themename/themename.layout.scss which is using the Compass grid extension Susy
- themename/_*.scss files which contain theme specific.
- You work in the layouts/layoutname directory to modify your layout (tpl.php)
- Compass generates all your css and puts in your ‘themename/css’ directory
- Add to both your template.info file and your ‘layout/layoutname.layout.inc’ file