1

I´m still testing the Omega theme, and trying to get its templates and css files to work out for me. I´ve already read at the documentation and issues´ replies at Drupal forums.

They say:

Think of global as the 'mobile first' template and this this is where most of your css will go.

Ok, so for mobile I use only global.css and for other resolutions I use all the other templates.

The default template is for desktop resolutions where the css is different for that of mobile. The remaining templates are really just for exceptions and other values to address scaling up to wider resolutions.

This is what confuses me, because the other css files are narrow, normal and wide. So I think narrow should be for 7" screens, normal for 10" screens and wide for all the other, bigger screens (usually the desktop). So where fits default template?

Try resizing your browser window to see the changes between layouts.

I´ve tried that, setting just a line of code in every css file, determinig different body background colors for each case. global.css showed on the mobile screen. global.css showed on the 7" tablet on portrait mode. narrow.css showed on the 7" tablet in landscape mode. normal.css showed on the 10" netbook. wide.css showed on the 19" desktop screen.

The color that I´ve set at the default.css file didn´t showed. I´ve took mozilla firefox and resized the browser manually, and all the other templates showed just fine, but default settings never appeared.

I´ve asked this at Drupal community forums, but I would like to know what you think about this. Thanks!

Improve this question

1 Answer 1

Reset to default
4

Ok, this is really one of the confusing aspects of Omega. Once you grasp it, though, it does make life easier.

The full explanation is found in the Omega Theme Documentation Handbook under How CSS works in Omega - "Ogres are like Onions... They have LAYERS".

global.css applies to all layouts (hence the name). Since they apply to all layouts, this is the mobile-first sheet.

mytheme-alpha-default.css applies to all of the non-mobile layouts, which is when the grids kick in.

Then the narrow, normal, and wide sheets stack depending on which breakpoint you are on.

So if you are mobile, you just get global.css

Narrow, you get global.css + mytheme-alpha-default.css + mytheme-alpha-narrow.css

Normal, you get global.css + mytheme-alpha-default.css + mytheme-alpha-narrow.css + mytheme-alpha-normal.css

Wide, you get global.css + mytheme-alpha-default.css + mytheme-alpha-narrow.css + mytheme-alpha-normal.css + mytheme-alpha-wide.css

The best way to think about this is (in order):

  1. How does my site need to look on mobile? Make global.css
  2. How do things change when the grid system kicks in? Make mytheme-alpha-default.css
  3. How does my site look when I am on a portrait table? Make mytheme-alpha-narrow.css
  4. How do things change when I am on a normal desktop? Make mytheme-alpha-normal.css
  5. How do things change when I am on a widescreen monitor? Make mytheme-alpha-wide.css

In other words, don't think of this as four different layouts; think of it as a base layout that you apply changes to as you get wider.

Improve this answer
1
  • 2
    Very well explained. It took me a while to bend my head round the whole mobile-first principle at first too, but as you say...once you do it does make life a lot easier
    – Clive ♦
    Jan 22, 2013 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.