Overriding style sheets from modules and base themes

Each core or contributed module will generally provide a reasonable default for the presentation of its output. This includes the markup itself and an associated style sheet. (see the explanation on the overriding behavior for the markup.) Due to the extensible nature of Drupal, it would be a great burden for themers to handle everything being pushed out to the browser. These defaults are there to be changed at the themer's discretion. Just like the overriding behavior for themable functions and templates, the style sheets provided by core and modules can be overridden. Do not modify directly. All changes should be localized inside your theme.

--

Overriding core and contributed module style sheets

To override a core or contributed module style sheet, it must be redefined within the theme's .info file. Take "system-menus.css" as an example. It is located in "modules/system/system-menus.css". With the following entry in the .info file, the original CSS file will be ignored and your local copy will be loaded.

When overriding a module style, the actual CSS file should be present inside your theme and pointed to the right location with a matching name. This ensures the original is replaced with the style sheet provided by the theme.

Adding the override for a style sheet that does not exist inside the theme will omit the core or module style sheet. This is by design and this behavior has been corrected since the release of 6.0 in 6.3.

A few notes:

• Overriding core CSS files will prevent the default "style.css" file from loading. Remember to explicitly define any defaults when needed.
• The themes override must have a matching media type of the original style.
• Any linked elements within the style will have to be corrected. Double check the file for any 'url()' properties or '@import' rules to make sure they are pointing to the right resource.
• The order the style sheets listed in the head of the page will change. In effect, this may cause some cascading rules to change with it.
• Some core and module style sheets are loaded conditionally. Overriding through .info files will force the file to be always used.
• If only minor changes are required, consider using CSS selectors to override the styles instead of overriding the whole file.

Remember to clear your cache after making this change! Navigate to Administer > Site configuration > Performance. Scroll to the bottom and click, "Clear cached data."

Overriding a base theme style sheet

The following applies to sub-themes. To prevent a style sheet from a base theme from being carried over to a sub-theme, you can redefine the style sheet inside the .info file. This works the same way as overriding module or core style sheets.

The base theme and the sub-theme must have the same entry:

If the file exists inside the sub-theme, then it will be used; omitting the file in the sub-theme will prevent the file from loading from the base theme as well.