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.

Go to your Omega sub-theme configuration settings and open the 'Toggle styles' section. You should see the stylesheet you added now appearing near the bottom of the 'Enable optional stylesheets' section. Check the box and save the sub-theme settings and your stylesheet should now be processed correctly.

Responsive Styling in Omega

Responsive Styling patch

There is a patch to correct responsive styling in Omega: #1627478-14: CSS preprocessor order conflict

Remember that if you're using a subtheme with an underscore in the system name to follow item 4 of http://drupal.org/node/1298682.

Without patch

If you do not want to apply a patch, you can use the classes that are automatically set on the body and change when the window size changes. This does depend on JS, but that is not an unreasonable requirement today. Keep in mind that this can cause a slight delay in rendering the page as expected:

  • responsive-layout-wide
  • responsive-layout-mobile
  • responsive-layout-narrow
  • responsive-layout-mobile
.test {
  font-size: 20px;

  .responsive-layout-mobile & {
    font-size: 12px;
  }
}

The above code will generate:

.test {
  font-size: 20px;
}
.responsive-layout-mobile .test {
  font-size: 12px;
}

This should also work with any custom responsive rules that you create.

Comments

FallinHigh’s picture

FallinHigh commented

My .info file:

css[global.css.less][name] = My custom global styles
css[global.css.less][description] = Global LESS CSS stylesheet.
css[global.css.less][options][weight] = 10
settings[alpha_css][global.css.less] = 'global.css.less'

css[SUBTHEME-alpha-default.css.less][name] = My custom default styles
css[SUBTHEME-alpha-default.css.less][description] = Global LESS CSS stylesheet.
css[SUBTHEME-alpha-default.css.less][options][weight] = 10
settings[alpha_css][SUBTHEME-alpha-default.css.less] = 'SUBTHEME-alpha-default.css.less'

css[SUBTHEME-alpha-default-narrow.css.less][name] = My custom narrow styles
css[SUBTHEME-alpha-default-narrow.css.less][description] = Narrow LESS CSS stylesheet.
css[SUBTHEME-alpha-default-narrow.css.less][options][weight] = 10
settings[alpha_css][SUBTHEME-alpha-default-narrow.css.less] = 'SUBTHEME-alpha-default-narrow.css.less'

css[SUBTHEME-alpha-default-normal.css.less][name] = My custom normal styles
css[SUBTHEME-alpha-default-normal.css.less][description] = Normal LESS CSS stylesheet.
css[SUBTHEME-alpha-default-normal.css.less][options][weight] = 10
settings[alpha_css][SUBTHEME-alpha-default-normal.css.less] = 'SUBTHEME-alpha-default-normal.css.less'

css[SUBTHEME-alpha-default-wide.css.less][name] = My custom wide styles
css[SUBTHEME-alpha-default-wide.css.less][description] = Wide LESS CSS stylesheet.
css[SUBTHEME-alpha-default-wide.css.less][options][weight] = 10
settings[alpha_css][SUBTHEME-alpha-default-wide.css.less] = 'SUBTHEME-alpha-default-wide.css.less'

mansspams’s picture

mansspams commented

Got my setup working, including default/narrow/normal/wide by similar code in .info file. I had to disable these styles in Omega UI, only then it worked, otherwise I had wide styles in mobile. Of course, you need to change SUBTHEME part of filenames everywhere.

juhog’s picture

juhog commented

My responsive stylesheets seem to work without touching the .info file at all. I just renamed my files to .css.less (e.g. themename-alpha-default-narrow.css.less) and everything is working as expected. No need to disable the files with Omega UI either since the files are not listed there at all. Using Omega 3.1.

devitate’s picture

devitate commented

-

Soundvessel’s picture

Soundvessel commented

I strongly recommend against using the classes set to body because it causes a noticeable load delay since those classes are added via javascript.

gonz’s picture

gonz commented

Okay - I am just trying to help here - I completely went on a binder for 3 hours trying to figure out why LESS files were being added but not in a responsive media query way.

I followed the suggestion above - adding each mysubtheme.ccs.less file to the .info

All that was fine - I could enable/disable them from the Omega UI

Problem remains - when added via .info the files always get rendered - not desirable - they should be added and removed dynamically with javascript based on Media Query.

Ok - so now for the AHAH moment that blew me away - and will hopefully help someone else out there -

Subtheme that has an "under_score" in the name should be replaced with a "dash-between" the words.

Scenario: My .info name = my_subtheme.info places in a folder called /my_subtheme/

So rationally I thought:
ex LESS file in my subtheme: my_subtheme-alpha-default-wide.css.less

BUT NO

my_subtheme => my-subtheme-alpha-default-wide.css.less (all dashes my good friend. all dashes)

PS:

No need to add each file to .info - just add the less version of global css and the rest is handled perfectly by Omega.

- enjoy