Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By npollock on
I am working on a new theme that involves changing the background color of the entire site from white to a different color. This includes the white area in events, etc. The problem is that I am being forced to go into css files that are not located in the themes directory. For example, the events table listing pulls it's colors from it's own css file. Also, I am am not even sure where the drupal admin menus pull their colors from yet.
My question is, how can I create entried in the themes directory for my custom theme that override these other modules so I don't have to make changes to a bunch of files that would affect the way other themes look or perform?
For example, I changed the background color in the events module and now, if I switch to bluemarine for example, it no longer looks as it should.
Thanks
Norm
Comments
Your theme css should be in
Your theme css should be in the theme folder, called style.css
To replace values in other modules css, do the css thing - and override it in YOUR theme's style.css.
Never change other files, such as the misc/drupal.css or event module's css file.
--
Custom Drupal templates | More Drupal modules
--
Ixis (UK): Drupal support, Drupal hosting.
It's not so much where
the stylesheets are as what you put in them.
If you want to avoid editing any other stylesheets (which is a good idea for maintainability), you'll have to try and make your CSS selectors somehow more 'specific' (in CSS terms) than the existing ones.
ie a selector targeting an id will override one targetting a class etc etc.
As far as I'm aware, in nearly all cases the themes stylesheet is last stylesheet to be linked to in the HTML (use view source to check that with your site). So anything you specify in that stylesheet should be able to override stuff specified in earlier stylesheets.
If you can't override a certain style, it is probably because the other stylesheet is using a more specific selector. You'll have to either use the same or a more specific selector in your own themes stylesheet.
Does that make sense?
--
Anton
Thanks, I think that answers what I need to know
So whatever is in my theme should override whatever comes before it. So if I copy the class header and details from another css into my theme, then it will override the original css.
I will give it a shot, thanks for the responses.
Norm
Yep
An important part of mastering CSS isn't so much the 'Style Sheets' part, it's the 'Cascading' part. ie how to make use of selectors as well as inheritance and overriding to your advantage.
It's a shame IE currently only supports a few selectors though.
--
Anton