I've created a new view and changed some styles in view.css. But when I load the page, my styles are overridden by style.css and system.theme.css.
Is there a way to set my css "before" the system css?
Add a comment
|
7 Answers
Add to your theme's template.php file:
function THEMENAME_css_alter(&$css) {
unset($css[drupal_get_path('module','system').'/system.theme.css']);
unset($css[drupal_get_path('module','system').'/system.base.css']);
unset($css[drupal_get_path('module','system').'/system.menus.css']);
}
This is a pretty extreme option. In many instances you may want to just override with more specific CSS as Rory suggests. Or use a combination of the techniques.
solution from: http://drupal.org/node/592636#comment-4370580
1 Comment
squarecandy
You might also consider a child theme of the Mothership theme. It has options for disabling all kinds of Drupal default CSS and JS.
Most of the time I find Drupal's CSS styles to be horribly ugly and utterly nonsensical in terms of modern webdesign. If you're concerned with best practices it's best to just remove them all in the theme and rebuild it using something like Bootstrap or something that wasn't written eight years ago.
Comments
The best method is to make your selectors more precise than those in the drupal default css. The simplest way is to put a class or id on your body.
For example:
A {
color: #F00;
}
#container A {
color: #0F0; /* this will be used as the selector is more precise */
}
Failing that, you could use the !important modifier on your rules, but this may cause problems later should they need to be overidden too.
A {
color: #0F0 !important;
}
1 Comment
Clive
The selectors don't need to be more precise, just at least equally as precise. The fact that styles.css is loaded later on will mean the second selector will be favoured. +1 either way though
Here's the proper way to override system css files.
Copy all
.cssfiles from/modules/systeminto your theme directory.Add the following to the
*.infofile in your theme directory:
; Override system css
stylesheets[all][] = css/system.admin.css
stylesheets[all][] = css/system.admin-rtl.css
stylesheets[all][] = css/system.base.css
stylesheets[all][] = css/system.base-rtl.css
stylesheets[all][] = css/system.maintenance.css
stylesheets[all][] = css/system.menus.css
stylesheets[all][] = css/system.menus-rtl.css
stylesheets[all][] = css/system.messages.css
stylesheets[all][] = css/system.messages-rtl.css
stylesheets[all][] = css/system.theme.css
stylesheets[all][] = css/system.theme-rtl.css
Comments
CSS styles are being applied in order of the files that are being loaded. So, you can either move the declaration of your view.css after the style.css, or to the styles that you want to be first in order add !important example:
.wrap
{
width:960px !important;
}
1 Comment
Rory McCrossan
'CSS styles are being applied in order of the files that are being loaded.' While this is true, for competing properties of the same element, the selector precedence is used as I mentioned in my answer.
If you are feeling brave you can copy style.css into your theme folder and rewrite it. Or just dump it out of your themes .info file. It's a nuclear option but good if you want TOTAL control or to apply some radical simplicity. If you do this you will almost certainly want to use another theme for admin tasks as styling admin css is a pointless waste of time for most of us.
Comments
There is a module for better and easier control over CSS and JS without any coding and using theme.info, including replacing, removing, filtering system and core contributed modules CSS and JS files and much more https://www.drupal.org/project/css_js_total_control
