Hi,
I wanna continue on this thread:
My custom css file doesnt override the language switcher plugin css or any other plugin css whatsoever.
I dont wanna use !important at all.
So i’ve tried adding custom css from theme and child theme folder, i still need !important either way.
So is it possible to add /plugins/language-selector/css to my child theme folder and copy language-selector.css there?
Thanks!
The only way your custom CSS could be overruled is by either a) your CSS is parsed before the plugin’s or b) your selectors have lower specificity, like e.g. your CSS selector references only one class, while the one in the plugin references two. Have you checked what happens in your browser’s development tools?
Hey Utis,
Yeah thanks, i did A already. And for this specific plugin you can turn off built in css.
Fixing the dropdown:
For this specific plugin you need to change the template class for language selector twig file to (for example) dropdown-menu2 instead of dropdown-menu. I found several themes using the same class so the dropdown wouldn’t work. Also when turning off built in css in the plugin options, the dropdown doesn’t work.
Hey, aristotletalks!
I seem to have trouble making myself understood, lately … 
English is not my first language.
What I understand from what you wrote is this: You want a to change the appearance of some element on your page that is added by a plugin. You successfully added custom CSS to your page and when you use !important that does indeed change the appearance.
I also understood that this would solve your problem except that you don’t want to use !important. So the question would be: Why doesn’t your custom CSS apply without it?
Is that understanding correct? If so, I was addressing two possible causes for this. A) is a bad thing: If the plugin CSS is like this:
.this-cool-element {
background: pink;
}
And your custom CSS is like this:
.this-cool-element {
background: black;
}
… then both selectors have the same specificity: One class. So the browser applies whichever attribute comes last. You want your custom CSS to be the last <link> on the page:
<link rel="stylesheet" href="/some-path/plugin.css">
<link rel="stylesheet" href="/some-other-path-doesnt-matter-where/custom.css">
However, if the plugin CSS looks like this:
.some-cool-component .some-cool-child-element {
background: pink;
}
and your custom CSS looks like this:
.some-cool-child-element {
background: black;
}
Then you’re out of luck. .some-cool-component .some-cool-child-element is a selector with two classes and thus has higher specificity than a selector with one class. Here’s a somewhat wacky overview.
In order to fix this, you have to make sure that your custom CSS selectors have equal or higher specificity. Equal could be simply:
.some-cool-component .some-cool-child-element {
background: black;
}
If it’s higher, the order doesn’t matter. If it’s equal, your custom CSS has to come after.
You can investigate what’s happening with your browser’s developer tools, typically by right clicking on an element and selecting “inspect element” from the context menu. At least the developer tools in Firefox and Chrome are very good. Here’s a screenshot from my browser:
The tool lists all the CSS that would apply by selector rule or by child inheritance, with the once that are overruled being crossed out.
I hope that does contribute to solving your problem and I didn’t completely misunderstand you. It’s, frankly, not a surprise that a menu stops working if you disable its CSS completely.
“I hope that does contribute to solving your problem and I didn’t completely misunderstand you.” >
You helped me a lot and understand perfectly, this is what its all about:
then both selectors have the same specificity: One class. So the browser applies whichever attribute comes last . You want your custom CSS to be the last <link> on the page
So how do i achieve parsing after the plugin stylesheets?
All plugin assets are loaded through this code:
{{ assets.css() }}
But if i add {% do assets.add(‘theme://css/custom.css’, 101) %} after above code, it doesn’t show up in the head.
Why? I found this thread from 2016 which is exactly on topic:
I’m still not getting the solution here? Can we change the parsing of a single sheet by changing the end?; {% do assets.add(‘theme://css/custom.css’, 101) %}
Perhaps we can add a new asset group?
IIRC, the second argument to assets.add is about the order. You’d have to look it up in the manual, but I think lower numbers have higher priority and thus appear later in the HTML output. Alternatively, you can add your own <link rel="stylesheet" href="{{ url:('theme://css/custom.css') }}"> in your template Twig.
Okay im gonna try that now.
Im wondering, can i add something like this to overrule {{ assets.css() }}?;
{% do assets.add(‘plugin://language-selector/css/language-selector.css’) %}
And i don’t get why this theme can parse css assets outside the stylesheet block?
Okay nice you did it Utis, thanks!
So you just set your custom stylesheet as highest priority and it will be the bottom stylesheet, thus your custom stylesheet overrides all other stylesheets.
Like this: {% do assets.add(‘theme://css/custom.css’, 01) %}
If you want to give a specific plugin priority to your custom stylesheet, just add 01 to the plugin and 02 to the custom stylesheet.
