How do I override plugin css in a custom theme?

Hi
I’ve created my own theme following the docs so that I will be able to run updates without worrying about overwriting my changes. However I want to make changes to a plugin’s css - specifically the language selector - is there a way to bring the plugin css file into my theme and overwrite that way? Or possibly a way to change/overwrite the classes in the plugin’s twig file with my own?

I know I could overwrite individual changes with !important etc but in this case I wanted to drop the whole css file and only use my own while still being able to update the plugin without doing lots of code checks afterwards

This is somewhat dependent on your theme. Basically the theme needs to have support to load a custom.css file if it exists. The Antimatter theme for example has this in the templates/partials/base.html.twig:

{% do assets.addCss('theme://css/custom.css',100) %}

This will add a css/custom.css file to the <head> if the file exists. Your theme needs to have this also. You might need to add it.

If you have this, then you can create a custom.css file and in there put more specific CSS to override the plugin css.

Sorry I got my original question wrong, what I should have been asking was how to inherit from a twig file from a plugin.
(should have had the code in front of me!) What I’ve actually done is update the

langswitcher.html.twig

file with my new new classes and also added a couple of new classes. How can I keep these changes when updating?

Hi @csixtyfour,

LangSwitcher has an option builtin_css (https://github.com/getgrav/grav-plugin-langswitcher/blob/develop/langswitcher.yaml#L2). If you set this to false then you have to provide your own stylings in your theme.

If you want to override Twig files from plugins, just put them in your theme templates folder (for langswitcher excactly in templates/partials). The Twig loading chain is designed in such a way, that Twig always searches the theme folder and falls back to other paths registered by plugins.