Omega subtheme nuances
Omega comes with two default theme grids:
- 960px - commonly used on desktop sites.
- fluid - more often seen on mobile sites for full width display.
I recently participated in the creation of a site using Omega as a basetheme with the following theme architecture:
Since it was desireable to have a 960px grid for the desktop site and fluid grid for the mobile site yet also both desktop and mobile subthemes had to inherit basic CSS from the Default Site Theme (background colour, text colour, margins/paddings etc) the default theme must have CSS files for the subthemes to inherit from. A fluid theme will not inherit anything from the custom basetheme if there are no fluid CSS files in the custom basetheme. The same is true of 960px subthemes.
For Omega subthemes the answer is simple, yet sparsely documented. At the very minimum include within your overall Default Site Theme the following files:
- custom-themename-alpha-default-normal.css
- custom-themename-alpha-fluid-normal.css
The default (960px grid CSS file) can also have -wide and -narrow derivatives, responsive to @media queries.
It should also be noted that using the global.css files in subthemes can cause non-inheritance of parent global.css unless the following is adhered to:
- Subtheme global.css are renamed to custom-themename-global.css
- Any declarations of css[global.css] in the subtheme .info file are renamed to css[custom-themename-global.css]
- Within the settings for the subtheme, under 'Toggle Styles', the css file is ticked to be included.
As usual, comments and questions below!
