If you've watched any of the Omega Theme videos available on the Internet (see Jake Strawn (aka himerus) Introduction), you will hear the Omega Theme described as being built from 'mobile to desktop", instead of from desktop down to mobile. The basic idea is that the 'default style' of a website should be one that looks good on mobile devices and that stylesheets should change as the browser window's size is changed or pages are displayed on different sized devices. There are so many stylesheets associated with the Omega theme that I was easily overwhelmed and confused. This article attempts to describe how some of the various CSS stylesheets that are involved in that process are configured.
Starterkit CSS Files
After you've create a custom theme from the Omega base theme using one of the starterkit folders provided with the theme, you will find 5 files in your custom_theme/css folder. Most of these files are named after the starterkit you chose. The list below are those files included in the omega-html5 starterkit as of this writing:
- global.css (see note**)
(**Note: global.css replaces mobile.css and style.css in previous versions to ease confusion)
When you create your subtheme, you will need to rename the "starterkit-omega-XXXX" part of your CSS files with your subtheme name, replacing any underscores ('_') you many have used in your subtheme name with dashes ('-'). For instance, if your subtheme name was "custom_theme", you would rename the file starterkit-omega-html5-alpha-default.css to custom-theme-alpha-default.css.
The global.css file gets its beginnings in your subtheme's .info file. If you take a look in there, you will see a section similar to this:
; OPTIONAL STYLESHEETS
css[global.css][name] = Your custom global styles
css[global.css][description] = This file holds all the globally active custom CSS of your theme.
css[global.css][options][weight] = 10
With these few lines in place and the global.css file in your custom_theme/css folder, you will see a setting to turn that stylesheet on and off in the theme settings "Toggle styles" section. You could add more stylesheets to your .info file and place the CSS files in your custom_theme/css folder and they too will show up in the "Toggle styles" section. Some may find this useful to organize their CSS code. Be sure to give due consideration to the "weight" value, as explained later. Many stylesheets can be loaded after the global.css file and possibly override any of its settings. Perhaps a better name for this "global" CSS file would be "custom"?
CSS Load Order
If you were to take a look at the <head> section of your web page's source code you would see that many CSS files are being loaded by default. Here is just a sample of that code:
<style type="text/css" media="all"> @import url("http://yoursite.com/sites/all/themes/omega/omega/css/formalize.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/alpha/css/alpha-reset.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/alpha/css/alpha-mobile.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/alpha/css/alpha-alpha.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/omega/css/omega-text.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/omega/css/omega-branding.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/omega/css/omega-menu.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/omega/css/omega-forms.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/omega/css/omega-visuals.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/omega/alpha/css/alpha-debug.css?lnm5j5"); @import url("http://yoursite.com/sites/all/themes/custom_theme/css/global.css?lnm5j5"); </style>
You can see that global.css is loaded last, so any css styles that you code within it will take precedence over the files loaded before it. If you were to change the "weight" setting in your subtheme .info file for global stylesheet to something like -99, you can expect your global.css file to get loaded at the top of this stack and all other files would have cascading precedence over it. So watch for that setting. Most, but not all the stylesheets loaded above, can be disabled in your theme settings "Toggle styles" section.
Default, Narrow, Normal and Wide.css
So what about the rest of the stylesheets in your custom_theme/css folder? These sytlesheets are loaded based on what "Layouts" you have enabled in the "Grid Settings" section of your theme settings. (See Omega's Grid Layout Settings for more information about Layouts.) The custom-theme-alpha-default.css is loaded first when any of the layouts are enabled. Additionally, stylesheets associated narrow, normal, or wide layouts are then loaded. Here is an example of the <head> section that loads the stylesheets if the Narrow Layout is enabled:
It is important to remember that the stylesheets for default, narrow, normal, and wide layouts that you have enabled are loaded after the many other default sylesheets loaded earlier in the <head> section of the web page.
A Use Case Example
Remember that with the Omega theme, your "default style" should be for the mobile device, which might typically have a smaller screen size. Your "Site Name" already has some styling in the Omega base theme "omega-branding.css" file which is loaded by default (unless you disable it in the them "toggle styles"). Since we are styling for the small screen, we might use the "global.css" file to overrides or add style to change the size of your site name to something a little smaller when viewed on an iPhone (3G), for instance.
Then, perhaps with the "normal" and "wide" layout enabled, when the page is viewed in a larger screen or browser window, we would want to override that smaller site name size we styled in the "global.css" stylesheet with something a bit larger. We could override that style in the "custom-theme-alpha-default.css" which gets loaded when the layout media query results to TRUE. Or perhaps we would want the site name even larger in a "wide layout", so we would override the size again in the "custom-theme-alpha-wide.css". Keep layout "weight" in mind when trying to override styles, or you could end up letting the wrong stylesheets take cascaded precedence.