Last updated April 21, 2011. Created by mr.baileys on May 29, 2008.
Edited by kristofer, rootwork, Tor Arne Thune, ygerasimov. Log in to edit this page.
You can override the style sheet provided by a core or contributed module.
Most modules provide defaults 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.) These default styles can be overridden by making changes within your theme.
Overriding core and contributed module style sheets
To override a core or contributed module style sheet, it must be specified in your theme's .info file. For example, system-menus.css is located at "modules/system/system-menus.css". If you place a file with the same name in your theme's folder and add the following entry to the .info file, the original system-menus.css file will be ignored and your version will be loaded in its place.
stylesheets[all][] = system-menus.css
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. In Drupal 7, style.css does not load unless it is specified in the .info file.
- The themes override must have a matching media type of the original style.
- URLs within the replacement style sheet may need to be corrected. Check the file for any '
url()' properties or '@import' rules to make sure they are pointing to the right resource. - The order of style sheets listed in the head of the page will change. 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.
- In Drupal 7, if you would like to override some css files please use hook_css_alter in template.php (see example in seven theme).
Remember to clear your cache after making this change!
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:stylesheets[all][] = masterStyle.css
If the file exists inside the sub-theme, it will be used; omitting the file in the sub-theme will prevent the file from loading from the base theme as well.