How To Create an Omega 4 Drupal Subtheme on an Ubuntu VPS

About Omega

Omega is one of the most famous Drupal responsive base themes out there - with over 66,000 official installs. Version 4 takes a radical step away from the way Omega 3 was designed (with flexible UI options for site builders) and makes it a base theme for more seasoned front end developers.

In this tutorial, I will illustrate the step by step process of installing Omega 4 and creating your first subtheme. For this, I will assume you are running your own VPS, with Drush and a copy of Drupal already installed. You can follow this tutorial to get yourself set up if you haven't already. And yes, if you are not using Drush yet for your Drupal work, start today.

Change Users

It is important that if you are operating on your VPS with the root user, you'll need to change to another one. So unless you are already running the VPS with a different user, go ahead and create one (let's call him tony):

sudo adduser tony

Run through the wizard and you can then go ahead and add him to the sudoers group (so you can run sudo commands with this user):

sudo adduser tony sudo

Now you can change users by logging in with this newly created one.

Get Yourself a Copy of Omega 4

Now that we are no longer using the root user (if you had been doing it in the beginning), it's time to download the Omega theme into our Drupal installation. We'll do it using Drush. Make sure you are in a folder (any) inside the Drupal site and run the following command:

sudo drush dl omega

Since version 4 is already a recommended release, Drush will download the latest stable release automatically. Next, enable it with the following command:

sudo drush en omega

Then clear all the caches for good measure.

sudo drush cc all

Next up, quickly install unzip as you will need it later on:

sudo apt-get install unzip

You'll notice that all commands are being preceded by sudo because we are not the root user.

Ruby Version Manager (RVM)

Since with Omega 4 you can work with Sass, Compass, Susy, and all sorts of other goodies that are written in Ruby, we'll need to take care of Ruby and the Ruby gems before we move on. The recommended way to proceed is by first installing the RVM. Run the following command to install it:

\curl -L https://get.rvm.io | bash

In order to use it, run the following command:

~/.rvm/scripts/rvm

Then, run this command to make sure all the requirements for Ruby are installed on your VPS:

rvm requirements

Now that RVM is installed, you should have two things you'll be using for your theme: rubygems and the bundler (we'll see in a minute what these are).

Omega Subtheme

It's time to use Drush to generate ourselves the subtheme we'll be working with. Again, somewhere inside the Drupal site folder, run the following command:

sudo drush omega-wizard

Follow the instructions in the terminal window: give the theme a name (let's say fancy), choose a base theme (let's say Omega), a starterkit (let's say Basic), the destination (probably Site), the site itself (all if you are not running multiple sites), keep or remove the default readme file, and enable your new theme the default on the site.

Please note that in the process that happens now, you'll need unzip to be installed (but we already took care of it so we're fine).

If you now navigate to your site, you can already see the new subtheme enabled and set as default on your site. Are we done? No, not quite.

Ruby and Ruby Gems

Navigate in your terminal to the folder of this newly created theme:

cd /var/www/drupal/sites/all/themes/fancy

You should get a message that looks something like this:

ruby-1.9.3-p448 is not installed.
To install do: 'rvm install ruby-1.9.3-p448'

The Ruby version may differ in your case and is strictly related to the version of Omega you installed. Due to many of the Gems that extend the functionality of this theme are constantly being upgraded (for instance Sass), there is a high risk that the syntaxes will change with each upgrade with no backwards compatibility.

In the subtheme folder, you'll notice two files (.ruby-gemset and .ruby-version) which dictate the version of Ruby and which gemset environment to be used in this folder. You can therefore have another Omega 4 subtheme run a different version of Ruby with a different gemset without any trouble.

So now that this is clear, let's install the version of Ruby we'll need here (you've been told from the terminal message you got when you navigated into the subtheme folder). Let's run the following command to install it:

rvm install ruby-1.9.3-p448

Change of course the version with the one you've been told. You can also check inside the .ruby-version file and see the version there. Now that you have the proper version of Ruby installed for your theme project, you can run the following command to make sure that it is being used for it:

rvm list

If you only have one version of Ruby installed, you should be fine. But it doesn't hurt to know this small command that outputs the different versions and how they are being used in the current environment (that of the subtheme, so make sure you are in the subtheme folder when you run it).

Now it's time to install the Gems that come with your theme (such as Sass, Compass, Susy, etc all specified in the Gemfile file). Run the following command:

bundle install

You'll now see the individual Gems being installed as messages get printed on the terminal screen. Additionally, a Gemfile.lock file gets created next to Gemfile which keeps track of the exact versions of Gems installed. So if you need to run the install command again, the same exact Gems get installed - preventing any incompatibility issues.

If you get an error that the Gemfile.lock cannot be written due to permissions issues, make sure the subtheme folder is owned by you - the user running the bundle install:

chown -R tony /var/www/drupal/sites/all/themes/fancy

And now you are basically done. If you want to test Sass for example, edit one of the .scss files located in the sass folder

cd /var/www/drupal/sites/all/themes/fancy/sass/

And paste in the following lines:

body {
  background-color:red;
}

Now if you refresh the site in your browser….nothing happens. You need to compile the Sass and turn it into regular CSS. To do this, you can use Compass by running the following command from the subtheme root folder:

compass compile

You should get a notification and now if you refresh your browser, the Sass has been turned into CSS (found in the css/ folder).

If you are developing and want all changes to the .scss files to be automatically compiled, run the following command:

compass watch

This will watch for changes and compile them automatically. Press CTRL-C to make it stop watching.

Additionally, you can find out more about using Sass in this tutorial I wrote earlier.