LESS and Omega

Documentation on integrating the LESS module and Omega theme framework.

Usually when creating a sub-theme adding custom stylesheets is as simple as adding a snippet to your theme's .info file:

stylesheets[all][] = example.css.less

Only with Omega this goes against the grain and causes the compiled 'example.css.less' to show up before Omega's own CSS files.

So when in Rome, do as Omega does and use the following example:

css[example.css.less][name] = My Project example styles
css[example.css.less][description] = LESS CSS stylesheet for My Project.
css[example.css.less][options][weight] = 10
settings[alpha_css][example.css.less] = 'example.css.less'

When you are building a fresh sub-theme that has yet to be enabled, the above example will work perfectly.

If you tried the above and are wondering why its not working, then the most likely reason is that you already enabled your theme and added the .info entries after, but don't worry there is a simple fix.

Using Sass and Compass with Omega 3.x

Sass is a CSS pre-processor, and Compass a library of Sass code. While both will be part of Omega 4.x, you can incorporate them into 3.x as well without much difficulty.

Community Media Theme 1.x (based on Omega)

Disable debugging features and replace default logo

Next, we will disable the debugging features of Omega subthemes and replace the channelAustin logo with your logo:

  1. Click on Appearance in the Admin Toolbar
  2. Find the Community Media Theme and click Settings
  3. Click debugging in the list of vertical tabs
  4. Uncheck Enable the debugging (placeholder) blocks for the selected roles and Enable the grid overlay for the selected roles
  5. Now towards the bottom of the form, find the Logo image settings
  6. Either upload a logo or link to an existing logo. The logo will preferably be a transparent PNG, but a GIF or JPG will also work.
  7. Click Save configuration

Remove Secondary Menu from theme settings

The secondary menu (the User Menu that includes My Account & Log Out) should always be disabled from the theme settings. Instead, if you wish to use the User Menu, place the User Menu block in the region where you want that menu to appear. This is how to do it:

  1. Click on Appearance in the Admin Toolbar
  2. Find the Community Media Theme and click Settings

CSS IDs and Classes in an Omega theme: a general outline

When you approach the task of theming a new Omega subtheme, it's worth bearing in mind the variety of classes and IDs that are built in to the Omega structure.

Taking the content section which in this case contains a content region which takes up 8 columns of grid width, and a sidebar region which takes up the remaining 4 columns, you can see a nested structure:

  • section with id of "section-content" and classes of "section" and "section-content"
    • div with id of "zone-content-wrapper" and classes of "zone-wrapper", "zone-content-wrapper" and "clearfix" (this div only exists if the zone is configured to have a full width wrapper)
      • div with id of "zone-content" and classes of "zone", "zone-content", "clearfix" and "container-12"
        • div with id of "region-content" and classes of "grid-8", "region" and "region-content"
          • div with classes of "region-inner" and "region-content-inner"
        • div with id of "region-sidebar" and classes of "grid-4", "region" and "region-sidebar"
          • div with classes of "region-inner" and "region-sidebar-inner"

Here is an image showing this structure:

Structure of blocks in content section

Customizing the Look of Your Site

The Community Media Theme is a sub-theme of the responsive Zen theme (version 1.x was instead based on the Omega theme), designed as part of a Community Media installation.

As a responsive theme it is designed to work well on desktop, tablet, and mobile devices. As with all sub-themes it is meant to be customizable to suit the specific needs of the community media center.

Follow these steps to enable the Community Media Theme as the default theme for all users:

  1. Click on Appearance in the Admin Toolbar
  2. Find the Community Media Theme and click Enable and Set as Deafult
  3. Click Disable for the theme that was previously the default

There are additional step required to enabled the Community Media Theme without making it the default for all user.

It can be integrated with the Community Media Slideshow module.

Override Logo Link

Omega Changelog & Roadmap

The following pages outline by version number the changelog and roadmap for the Omega project.

Pages

Subscribe with RSS Subscribe to RSS - Omega Theme