Drupal coder

Overriding CSS stylesheets in Drupal themes

Some modules do provide their own CSS files. Themers might not always like what's happening in there and want to provide their own styles. You can remove the file (using preprocessing) or you can just replace the file with your own in your theme.

An example? Take the link module, which adds a link field type to CCK. This module has provides a CSS file : link.css. Suppose you have uploaded your module at sites/all/modules/contribute/link, we now have a file sites/all/modules/contribute/link/link.css.

To replace this file with our own CSS style in our theme, we just copy this file to our theme. So if our theme is at sites/all/themes/my_theme, the CSS file is at sites/all/themes/my_theme/link.css. We can now put our own styles in there.

Developer caveat! Give your CSS files a unique name

This is something that is very often overlooked, but you should never name your module CSS files something general like style.css or styles.css or... Why not? Because if a theme has a style.css file, the one from your module will not be used anymore.

Documentation

You can find this documented in the code for drupal_get_css, which you can find in the API.

It loads the CSS in order, with 'module' first, then 'theme' afterwards. This ensures proper cascading of styles so themes can easily override module styles through CSS selectors.

January 13, 2010Drupal, theming

Comments

The easiest way to overide css (suppose of view slideshow module) is as follows.
1)Preffered to have mozilla developer toolbar installed. That will show you all css files of the site in css tab.
2)as we wish to overide slideshow css, we first point out wjich part we wish to overide(like we have only forward backward button to be changed).
3)Then view source of slideshow and find classes or ids for those buttons.
4)Then by using developer tool, we can search this class in slideshow css files.
5)Once class is found(we can check if that is the class we are searching for by cutting that class in developer too, that will have effect on site), we can copy the class and put it in our theme css files at a appropriate pace after adding some comments.
6)you can now to changes in these css class and ids.
7)this will be global for whole site whereever slideshow is functional.
8)if u wish to have specific, you can add some refrence from view source.
Thanks

I'm looking forward to reading the full article. I wonder how the learning (programming) compares to work done on using actual neural cultures as computational units ccnp exams (e.g. Potter at Georgia Tech). Simulating the same equations without living tissue would definitely be a nice robustness gain, not to mention size reduction, but AI skeptics will have a hard time denying "intelligence" to an actual brain! :)

Thanks for the article and Hans thanks for your comment. It wasn't working here and I forgot to put the css file in the theme .info file. Now it works !

Works IMHO only if you also define the module css file in the .info file of the theme.

I found that not all modules css can be override.
For example, the administration menu module http://drupal.org/project/admin_menu

I want to enlarge the admin menu font size, I copy admin.css from the module and put under my own theme folder.

Clearing cache. The css still grab the original module css

Dear Drupalcoder,

I hope you don't mind me posting as you are a freelancer I was hoping you could help me out. I know this post is about loading performance but I was wondering if there is a way to remove a stylesheet on one page? I have developed a forum by using phpbb2drupal and now my forum is totally messed up as it is calling style.css rather than the phpbb3 embedded style. I have tried creating a page-forum.tpl.php page and removed print styles, but it still does not work.

Also tried this solution on the drupal site:

<?php
print str_replace('@import "misc/drupal.css";', '', $head);
?>

So, question is how to remove CSS styles (default) to one page in drupal and keep the headers. Please please please help me :-)

bookmarked ! thanks for sharing.

Is it possible to have those css files inside sub directories?
mytheme/modulecss/link.css
than
mytheme/link.css

I think I just have to try it

Maybe this is a silly comment, but every time that I want to change the css classes I just copy the content inside whatever.css file that each contrib module has, and just add that stuff to my own style.css inside my own theme. Inside there I just change whatever I want.
Maybe this isn´t the correct way to do it, but that way I don´t have any trouble to update my contrib modules, nor do I have to create several css files either.
Rosamunda

Hi, is something similar possible with JS files as well?
Thanks for help!

Thank your this trick. I didn't knew that...

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options