Omega 4 tutorials - Follow up from 12/10/13 Brevard Meetup

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
C13L0's picture

Set up your machine

Drupalpro is a prebuilt linux environment for drupal and is updated on a regular basis. If you are a windows user, you will first need to set up a virtual box with linux. While linux is the preferred choice to theme with Omega 4, you can also use mac but will need homebrew, etc.

Mac user:
You will need to set up RVM to properly use O4. Follow these directions:
http://misheska.com/blog/2013/06/16/using-rvm-to-manage-multiple-version...

Windows user:

  1. Download and install Virtualbox https://www.virtualbox.org/wiki/Downloads
  2. Download Drupalpro https://drupal.org/project/drupalpro . Do not use IE to download or it will download with the wrong extension. Use firefox or chrome to download drupalpro in its native format .ova
  3. Open virtualbox and file>import the drupalpro .ova file. Choosing defaults is usually most appropriate during setup. It takes awhile for the initial install to complete.
  4. Update drupalpro. The directions are found in the middle of the page https://drupal.org/project/drupalpro
  5. Update drush as per directions in the middle of the page https://drupal.org/project/drupalpro. This is extremely important as Omega must have updated version of drush.
  6. Update Ubuntu (do not use the package manager)
    $ sudo apt-get update

Create a new site in drupalpro

  1. open terminal
  2. $ cd websites
  3. $ drush qc --domain=example.dev

You need to use .dev at the end of your site name. A new drupal site will now be created. The default login is admin and password is admin.

The directions below have been tested with Drupalpro

Ubuntu users start here but please change source /home/drupalpro/.rvm/scripts/rvm to your correct path For CentOS or other linux flavors...Please refer to http://misheska.com/blog/2013/06/16/using-rvm-to-manage-multiple-version... to set up rvm.

Install https://rvm.io/ Always check for the most recent/stable version!

 $ cd ~
 $ \curl -L https://get.rvm.io | bash -s stable 
 $ source /home/drupalpro/.rvm/scripts/rvm
 $ rvm requirements

Build and install the latest version of Ruby (this might take awhile). As of Aug 2013, this is the latest build. Please change as needed.

 $ rvm install 1.9.3
 $ rvm use 1.9.3
 $ rvm rubygems latest

Verify rvm install:

 $ rvm -h
 $ rvm list
 $ ruby -v

You should get a message similar to: ruby 1.9.3p448 (2013-06-27 revision 41675) [i686-linux]

Once you have your machine set up, you can proceed to set up an Omega 4 subtheme

Comments

Setup Omega 4 subtheme

C13L0's picture

Install Omega 4

cd to the root of your drupal site.

 $ cd websites/example.dev
 $ drush dl omega --select

Choose the appropriate Omega 4 version. This will automatically download and place Omega 4.x in sites/all/themes/omega. Omega 4 comes with it's own drush commands which is why it is important to have a recent version of drush. If you did not do the drupalpro and drush updates, you need to do so now.

Clear drush cache then view the new omega drush commands.

 $ drush cc drush
 $ drush help --filter=omega

Create your subtheme

 $ drush omega-wizard

Follow the setup directions.

Please enter the name of the new sub-theme [Omega Subtheme]: Yoursubthemename

Please enter a machine-readable name for your new theme [yoursubthememachinename]

Please choose a base theme for your new theme
2] : Omega - A powerful HTML5 base theme framework utilizing tools like
Sass, Compass, Grunt, Bower, Ruby Version Manager, Bundler and more.

Please choose a starterkit for your new theme
1] : Default: Comes with a well organized Sass setup with heavy use of
partials. (Provided by Omega)

Please choose a destination. This is where your sub-theme will be placed
Please choose a destination type.
1] : Site (e.g. 'all' or 'example.com')

Please choose a site.
1] : all

Do you want to keep the starterkit's readme files? (y/n):

Do you want to enable your new theme? (y/n):

Do you want to make your new theme the default theme? (y/n):

If everything went as it should you will see the following message:
You have successfully created the theme Yourthemename (yourthememachinename) in sites/all/themes. [success]


-Skip this section for mac users- This is due to a bug with rvm/ubuntu

Change terminal preferences to “run command as login shell”

  1. terminal > profile preferences > title and command
  2. checkmark "run command as login shell".
  3. Close terminal

Note: You will have to keep this preference on anytime you run bundle install and bundle exec guard


Bundle install
cd back to the root of your subtheme. cd websites/yoursite.dev/sites/all/themes/yoursubtheme

$ bundle install

Start the compiler and all the other goodies inside Omega 4

$ bundle exec guard

Finished! You have now created your Omega Subtheme

C13L0's picture

Creating a custom layout - There is not an option to upload the tutorial images (sorry)

This demonstration will create a custom layout for a forum page.

  1. In the omega/omega folder, copy the layout directory and its contents from the Omega theme and paste it into your subtheme.

  2. In the omega/sass folder, copy the layout directory and its contents then paste it into your subtheme/sass folder.

  3. In your subtheme/sass/layouts change the name of the following

    • simple folder to forum
    • simple.layout.scss to forum.layout.scss
  4. In your subtheme/layouts change the names of the following

    • simple folder to forum
    • simple-layout.tpl.php to forum-layout.tpl.php
    • Change simple.layout.inc to forum.layout.inc
  5. Open forum.layout.inc and make the following changes--

    • name = Forum
    • template = forum-layout
    • stylesheets[all][] = css/layouts/forum/forum.layout.css
  6. In the subtheme run bundle exec guard to generate the css files.
    The additional folders (divine, off canvas,etc) in the Layouts directory are examples and can be safely deleted if desired.

Applying custom layout to different pages on your site

C13L0's picture

Please note that fubhy recommends to use Panels instead of context_omega module. He has a 3 hrs walkthrough here http://www.youtube.com/watch?v=CmTuvzbPduI&feature=share

In this demonstration, we will be applying a new layout to a forum.

  1. Download context_omega and context. ctools is also required if you do not already have it installed.

  2. Enable Context, Context layouts, Context Omega, and Context UI

  3. In this example, we are changing the layout of the forum so we need to enable drupal core forum module

  4. Navigate to admin/structure/context

  5. Create new context: Structure > Context

+add

Name: forum (this is a machine name, must be all lowercase)

Tag: layout

  1. Conditions Add a condition: Path

forum

This is where the magic happens! If you don't see Blocks and Omega you need to clear cache, maybe twice.

  1. Reactions Add a reaction: Blocks and Omega

Choose an Omega layout: Forum

  1. Choose Main page content block and place under content.

  2. Save and navigate to yoursite.dev/forum

Your custom layout has been applied to the forum page and is ready for your custom css.

WOW

BeachsidePaul's picture

Just wow! Thanks for all your efforts Ms. C13L0! Now if I can just find time to get through all the information :-) Thanks again that was above and beyond!

Please let me know if any

C13L0's picture

Please let me know if any steps are out of place or not clear! BeachsidePaul, could you time yourself from start to finish? I would love to know approx how long it takes for complete set up. It took me days for my first setup but there was very little documentation to go by at the time

Florida

Group organizers

Group categories

Florida Topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: