8

I am trying to override the menu.css file in the default Classy theme through my library file. I have read through the documentation, but anything I tried doesn't work.

What would be the correct markup to override or disable this file?

Improve this question
2
  • Have you link to CLassy template?
    – felipsmartins
    Dec 1, 2015 at 13:35
  • I have a subtheme in which I have my own menu.css. This is a subtheme from Classy.
    – ForsakenCreator
    Dec 1, 2015 at 13:44

2 Answers 2

Reset to default
15

Add this to your theme's .info.yml to override it with css/my-menu.css from your theme:

libraries-override:
  classy/base:
    css:
      component:
        css/components/menu.css: css/my-menu.css

To disable it (don't load it when loading the classy/base library):

libraries-override:
  classy/base:
    css:
      component:
        css/components/menu.css: false

To get the classy/base key you need for the override, find the *.libraries.yml file where the CSS is declared. The part before the slash is the * in that file (e.g. classy.libraries.yml), and the part after is the top-level key in that file under which the CSS is declared.

In most cases I find it easiest to actually copy the library declaration from the libraries file that declares the asset to maintain the 'css', 'component', keys and indentation.

Note that you can do the same thing for JavaScript assets as well.

See https://www.drupal.org/node/2216195#override-extend for more information.

Improve this answer
6
  • Thanks for the explanation. I now get where you get the key from. I tried both of them but they give me the same error: >Incomplete library definition for definition 'libraries-override' in extension 'My-theme' in. Any idea what could be the problem?
    – ForsakenCreator
    Dec 2, 2015 at 8:51
  • 1
    From that error it sounds like you're working in *.libraries.yml, only library definitions go in there. Overrides, extends, etc. happen in your theme's *.info.yml file.
    – Cottser
    Dec 2, 2015 at 10:30
  • 1
    Thanks, you were right. I couldn't find anything that would suggest it had to be placed inside the *.info.yml file. It works now so thank you for your answer. Will definitely be using this in future.
    – ForsakenCreator
    Dec 2, 2015 at 10:43
  • One way to maybe remember it is that both modules and themes can have *.libraries.yml but only themes can globally add libraries and manipulate libraries via their *.info.yml file. Themes have more power with respect to libraries :)
    – Cottser
    Dec 2, 2015 at 14:34
  • Ah yes, because you have to interact with an asset from a different theme(In this case a parent-theme), you have to touch It's library first. And you can't edit a library through a library. Makes sense.
    – ForsakenCreator
    Dec 2, 2015 at 14:51
0

just gonna drop this update here for anyone else landing on this answer: Apparently the names have changed, but this works for me on D9.2.0:

libraries-override:
  bartik/global-styling:
    css:
      component:
        css/components/menu.css: false
        css/classy/components/menu.css: false
  bartik/classy.base:
    css:
      component:
        css/classy/components/menu.css: false
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.