Using Omega 4 with Omega Child theme, Compass, Sass, & Susy

Post By Heidi ~ 4th April 2013

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

  1. 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.
  2. 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

Other comments/suggestions:

Adding Regions:

  • Add to both your template.info file and your ‘layout/layoutname.layout.inc’ file
2 Replies

Sometimes you just wish you could see client’s browser… try Screenleap.com

Post By Heidi ~ 9th October 2012

Often, I will have a client describe to me something they are trying to do or what is confusing to them.   Screensharing has been around for a while but finding a easy one that takes little instruction for a non-technical user has been hard to find.  I finally found one I like and its called Screenleap.com.  It’s a simple tool that user just had to agree to run the java program.   The client clicks on ‘Share your screen now’, agree to run java, gives me the code and I can view their screen and they can show me.  There is no audio or instant chat with the tool, but I can have the client call me and client can walk me through what they are seeing or trying to do and I can determine what is going wrong or where the confusion lies.  Definitely a timesaver. 

Leave a reply

mnmas.org is now live, a Drupal 7 site

Post By Heidi ~ 27th September 2012

This client is super excited they now have a website that they are able to edit themselves and keep up-to-date without the need of web developer.   Having control of your own content is good.

 

Leave a reply

CMS’s and why they are good

Post By Heidi ~ 9th February 2012

I probably don’t mention it specifically but if you browse my website, you will find that I specialize in building websites with CMS tools.   The three CMS’s that I specialize in is WordPress, Joomla  and Drupal.  

My goal is to give clients a website that is easy for them to edit the content and keep the web-content fresh and up-to-date.     I provide training tutorials (pdf or video) showing how to use their website on specific things, but a lot of it is super simple where you click to edit content in a small word-like editor (referred to as a wysiwyg editor) and then click save.    

Here is a recently released article with 10 Reasons Why Every Small Business Needs a CMS-Based Website that I thought was excellent and covers a lot of good points.

I would add a eleventh reason in using a CMS: it can easily tie in their social media presence that the business uses.     It can be as simple as putting on their Facebook link but I would suggest more.  For example, if you write a blog/news post in WordPress, then it can be auto-posted to your Facebook business page, then if people comment on on that Facebook post, the Facebook comments will be pulled back to your WordPress post a comment.   

Leave a reply

USCoachesClub, a Joomla 1.7 site is live

Post By Heidi ~ 8th February 2012

USCoachesClub is very vibrant colored site based on Joomla 1.7.   It features 3 major functionalities:

  • A credit system where coaches can buy packages of credits to register for events/modules
  • Event registration where they can view upcoming events/modules and register for them using their credits.  The events/modules are live classes held around the area to train soccer coaches for youth soccer.
  • The last piece is tying all the user registrations into Mailchimp so the campaigns can be sent to notify coaches of new or upcoming modules.

image

Joomla 1.7 is a big improvement over Joomla 1.5.  (I skipped joomla 1.6)   It just provides an easier admin workflow than 1.5 and the built in user access levels is so nice. 

Leave a reply

Jogging the web looking for Joomla Themes?

Post By Heidi ~ 29th November 2011

I often go off a list to browse Joomla themes when I am looking for a good theme to meet client’s needs. 

I am trying out Jogtheweb to allow you to walk through the Joomla theme providers (club and individual). 

Feel free to use the jog for your own use:

Themes for Joomla

Leave a reply
  • Twitter
  • Facebook
  • LinkedIn