How do I override plugin css in a custom theme?

Started by Muut Archive 10 years ago · 3 replies · 1526 views

10 years ago

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

10 years ago

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:

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.

10 years ago

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?

10 years ago

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.

Topic	Replies	Views	Activity
About the Archive category Archive · by Deleted User, 9 years ago	0	1360	9 years ago
Hey buddies! Archive · by Muut Archive, 9 years ago	2	939	9 years ago
There is a way to do a "if condition" in MD page? Archive · by Muut Archive, 9 years ago	2	4069	9 years ago
Official docker image of grav (+admin +gitsync) Archive · by Muut Archive, 9 years ago	1	2958	9 years ago
Weird Grav + caddy + iOS + https problem Archive · by Muut Archive, 9 years ago	3	1122	9 years ago

Suggested topics