Omega StarterKit CSS Files

Thu, 06/30/2011 - 11:57 -- James Sinkiewicz

Screen Shot

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**)
  • starterkit-omega-html5-alpha-default.css
  • starterkit-omega-html5-alpha-default-narrow.css
  • starterkit-omega-html5-alpha-default-normal.css
  • starterkit-omega-html5-alpha-default-wide.css

(**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.

Global.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:Custom CSS Stylesheets

; 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.

Share: 

Comments

Submitted by Siavash on

I just started playing around with Omega today, and I had no idea how to go about adding my own css files.
This really helped!

Submitted by Ruben on

Hi James,
your posts on Omega have been very helpful to me.
To aid my remembering I wrote up a key of what exactly each of the style-sheets does. Sort of what you did here but I needed to strip it right down so that it would stick in my head. Writing it up has made it unnecessary for me, it is now in my head. Hopefully someone else will find it useful -
http://communitysites.com.au/node/5

Thanks,

Ruben
http://drupal.org/user/91170

Submitted by James on

New to drupal and was really struggling to get to grips with CSS priorities in Omega. This helped loads, Thanks!

Submitted by Rob Riley on

Really useful post, thanks a lot.

Submitted by Sam on

I'm still confused as hell. I could write decent css and make websites from scratch once. Now I'm using Omega I feel like it was ten years ago and I'm starting again!

Thanks for the tutorial though, it helped!

Submitted by sourcesqr on

I always thought Omega is THE next generation Drupal theme for developers, and I agree even more now after understanding a little bit further on the logics behind. Thanks for the great post! :)

Submitted by Bruce on

Hi James
Thanks for all your articles - you seem to speak my language:) I am at the moment playing around with Omega and hope to convert a static site to Drupal using Omega/Delta and Context. The site is at its inception: ctis.bruceclark.eu - as you can see I have a scrolling gallery as my header which would not work on a mobile. For a mobile i would rather use a static picture. How would this be done? I don't think css would be the way as we are not formatting content but replacing it. If you could point me in the right direction I would be ever so grateful. Thanks again for your articles
Bruce

Submitted by bruce on

Hya - I've sorted it now ... I just put two blocks in the region and used the appropriate css to display and hide respectively:o)

Submitted by asep on

thanks for "Omega StarterKit CSS Files" This article is very useful for me
greetings of friendship gambar lucu

Pages

Add new comment