Last updated January 29, 2013. Created by mr.baileys on May 29, 2008.
Edited by davidneedham, accrete.pramodp, kristofer, rootwork. Log in to edit this page.
You can override the style sheet provided by Drupal core, contributed modules or even other themes.
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. Drupal overrides are cascading and your theme's stylesheets override any that were previously declared. 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.
Comments
Getting rid of all CSS stylesheets except those of your theme
Drupal version: 7
If you want to get rid of all the css files showing up in the head of your theme except those of the theme the following code worked for me:
In the theme's template.php:
function mytheme_css_alter(&$css) {
foreach ($css as $key => $value) {
if ($value['group'] != CSS_THEME) {
$exclude[$key] = FALSE;
}
}
$css = array_diff_key($css, $exclude);
}
Unfortunately I can't find the page where I originally found it, but credit goes to that person, you know who you are. Thank you for sharing this. It took me ages to figure out how to get rid of all the css files added by Drupal.
I don't know if it works in other Drupal Versions.
Additional reading:
template.php
override sequence.
I would like to get clarification on the order in which overridden files get loaded if you provide a css file with the exact same name as a base theme's css file. It appears that, for example, if I use bartik as a base them and provide in my theme a file called layout.css, then my file is loaded in the same sequence position as the bartik file would have been. This means the sequence would look like:
(... system/module css files...)
my layout.css
bartik's style.css. colors.css,and print.css
the remainder my theme's css files.
I override layout.css because my changes are substantial and I want to replace the entire file. But this order of loading opens up the possibility of my styling in layout.css being overridden by something in the following bartik css files. It was not the behavior I expected when I originally started this. My options seem to be:
1) call my layout.css 'mylayout.css' and make sure I don't get anything from bartik's css files that I don't want. One issue is that I'm now loading an extra file and writing more css.
2) Keep it as 'layout.css' and make sure that anything that might get overridden by bartik's css files gets specified instead in a css file that is loaded after all the bartik files. Issue is that now I have separated what I consider to be layout css into multiple files.
An issue common to both is that I have to be careful of changes to my base theme's css files. Though that shouldn't happen to bartik it certainly does happen to other base themes.
If the behavior is 'as designed', then it should be clearly documented. But as I said, it wasn't the behavior I expected nor what I would think is optimal. I opened a bug issue at #1000776: loading order of css files when bartik is a base theme, which I will close if this is merely a documentation change.
David Rocks