CSS Weights, Default Loading Order and Overrides

<< Back to documentation Home

WARNING - IMPORTANT NOTICE: Information in this page is undergoing a MAJOR rewrite. Information in this page is partially incorrect and should not be used for setting up CSS styling strategy, Check back later for the most complete and correct version.

The Omega 3.x and the Responsive Grid loads CSS files based on media queries of the user's screen size in order to provide alternative layout or stylings in order to display the content best on the varying screen sizes. Thus when working with Omega 3.x you will find CSS files ranging from the very general to the very specific in the css directory of your newly created subtheme. The purpose of this page is to describe the various files and the recommended usage in order to have a responsive site.

By default the loading-order (and thus weight and ability to override) of these files are pre-set for you. Like Drupal, Omega is very modular, extensible and configurable, allowing you to change the weights should you wish to re-order these based off your needs. Initially we will discuss the default weights and recommended usage of the files keeping in mind the mobile-first design aspect of the Omega theme. After getting these basics down we will cover how to change weights, loading-order and add/remove stylesheets.

For the visually minded there is this.

Default Setup

The provided CSS files are weighted by default in this order:

1. global.css

   has the heaviest weight in all your Style Sheets (loads last after everything else). As the name describes it is used to for styling elements that are going to be universal on the site. In Omega's "Mobile First" design methodology, this then is also used to give the styles needed for the mobile version of your site. Thus, global.css is your base style from which other files in the responsive grid will override.

2. SUBTHEME-alpha-default.css

   This is where you will place all of your default styles for narrow, normal and wide. (note: that IE 6-8 will load this file as it does not use media queries.

3. SUBTHEME-alpha-default-narrow.css

   Next comes the responsive specific css files. These will be used to change the styling of your global (mobile) site in order to adapt to the screen sizes they correspond with. By default, narrow is used on smaller screens (from 740px-800px). An example of this is a tablet in portrait orientation. Values you place in this file will override those set previously in global.css.

4. SUBTHEME-alpha-default-normal.css

   This css file is used for screen widths commonly found on devices (800px-1024px). These values will override those of all previous css files (including the narrow css file). An example of a device with this screen width is a tablet in landscape orientation and most non-high def desktop computers.

5. SUBTHEME-alpha-default-wide.css

   This file is used for all wide-screen and high definition setups (over 1024px wide). Common examples are wide-screen HD monitors and laptops and televisions.

Recommended Usage

Use this css tree to style your site correctly in a "Mobile First" methodology. Initially style your site with the global settings such as fonts etc. in your global.css file. Next style your site for the mobile layout using the global.css file. Follow this by styling for each specific size (narrow, normal, wide) putting in each size's overrides to the those inherited from the narrower css files. When in doubt of the order of inheritance remember this:

global.css < SUBTHEME-alpha-default.css < SUBTHEME-alpha-default-narrow.css < SUBTHEME-alpha-default-normal.css < SUBTHEME-alpha-default-wide.css

Including Custom CSS and Changing Group Assignment and Weights:

You can also include CSS AFTER the Grid CSS by setting the group tag in the options array in the .info file like follows:

• css[file.css][option][group] = 2001 (that would be AFTER the grid CSS since that is being included with 2000)

For the .info CSS files everything is being included with group CSS_THEME by default (The heaviest weighted CSS group in Drupal )

So the big picture structure is ...

• mobile -> styles -> default -> layout specific (unless overriden in [options][group])

Extending Grid and CSS beyond Omega 3.x Provided alpha-default:

The above defaults and settings are all related to the "alpha default" the Grid provided by Omega 3.x because the Grid is named "alpha_default". in general it is Your custom styles ===> Grid styles ===> Grid attached styles ===> Grid attached layout specific styles

Since the above is so custom you cant be any more specific since you can place your styles anywhere you want. If this is confusing you, your best bet would be to inspect your HTML output and you will sure be able to figure it out yourself. that will give you a pretty good picture of the inclusion order

As you can see from the above you can customize and extend Omega 3.x to any level of sophistication and complexity that suites your layout needs, this is why we believe it is the best Drupal theme around that fulfills the needs of hard-core Enterprise CMS developer to the little guy who wants to keep things simple and use the default settings with ability to layout a fantastic site from the UI in the shortest time possible, Enjoy!

This is a dump from the subtheme creation docs, the necessity and location of it is still under debate
Create a styles.css File

You also could download this starter styles.css to assist in identifying the sections that can be overridden.

Now you can create a styles.css file that you can override the CSS settings for your custom theme. This allows you to only change the CSS that you want, and leaves the others intact. This saves you a lot of extra work.

Start Theming

Now that you have your custom theme installed with, you can visit /admin/appearance and you should see your new theme listed. Enable it and now you can begin to override the sections contained within your styles.css with you your own custom settings.

Using Firebug or an equivalent for your browser, you can locate a section on the page that you want to change, make and preview the change in your browser, and then add the changes to your styles.css.

For a visual guide to the zones and regions as well visit This Page for helpful guides.

<< Back to documentation Home