Mike Cho Development

Remove or replace a stylesheet in Drupal

Drupal uses a bunch of different .css files, for modularity’s sake, which it aggregates, to achieve its styling. Let’s say you want to turn one off.

First, go to Configuration/Development/Performance, and unclick “Aggregate CSS files”.

Note: I incorrectly highlighted JavaScript files. Just testing you!

Now if you flush your cache and look at the head section of your site, you’ll see a boatload of .css files. Wow!

Let’s say you want to turn off the one called tabledrag.module.css. You don’t need that particular one.

Yammel it

Go to your sub-theme or custom theme’s x.info.yml file (you are using a sub-theme I hope, right? Right?). Here you will add a new section called libraries-override. You might put it right under libraries.

The following code will turn off tabledrag.module.css.

libraries-override:
  system/base:
    css:
      component:
        /core/themes/stable/css/system/components/tabledrag.module.css: false

It is a rather convoluted structure!

It comes from the location of the stylesheet you’re trying to turn off. The original file is located in YourDrupal/core/modules/system/css/components

The code in the .info.yml file reflects that, with the addition of adding the “/base” part to “system.”

If you save and flush the cache, you will find that this file is no longer being loaded in the front end.

Replace a stylesheet

While removing a stylesheet might not seem that interesting, replacing one is–after all, Drupal is based on overrides. Here, we’ll find a stylesheet and then tell the theme to ignore it and use another in its place.

The procedure is nearly identical. De-aggregate the .css files, find the individual .css file you want to replace, and then put the new version (that you must create) into your .css directory.

For example, if you want to replace core/themes/stable/system/components/sticky-header.module.css, create a copy of that file and put it into, say /themes/yourawesometheme/css.

Now add a line in the .info.yml file:

libraries-override:
  system/base:
    css:
      component:
        /core/themes/stable/css/system/components/tabledrag.module.css: false
        /core/themes/stable/css/system/components/sticky-header.module.css: /themes/yourawesometheme/css/sticky-header-new.module.css

The only difference between this and the first case, is that instead of setting it to false, is you put the file that will replace the original file. Note that I renamed it to sticky-header-new.module.css.

To test it, you may wish to modify the new file in a not-subtle way, such as adding * { color: red; }, which will immediately turn all text red and thus show the override worked.