-
Hello, how can I add custom CSS before block styles get applied?
As it is now, if I add default margins for headings with custom CSS via the Additional CSS field in the Blocksy theme or WPCodeBox, it overrides block styles:
-
Have you tried adding ‘!important;‘ to the properties?
eg.
margin-bottom: calc(0.3em + 10px)!important; -
margin-bottom: calc(var(--has-content-spacing, 1)*(0.3em + 10px));(theme CSS) is what I’m trying to override with custom CSS (28px). But by doing so, block style (60px) is overridden too. And that’s my problem. -
Hello, how can I add custom CSS before block styles get applied?
The later the CSS is loaded, the higher priority it has, in your case, you are looking for a way to load the CSS the last. Usually, the CSS in customizer> additional CSS is the last to be loaded, so it should work in most cases.
It seems the first CSS
.entry-content h2(28px) is overriding everything, where does that CSS come from? -
That is my custom CSS from the customizer and it overrides block styles (h2.gb-headline) and I would like to avoid that.
So no, I’m not looking for a way to load it last (I can do that already), I’m looking for a way to insert that CSS before generated styles 🙂
-
I really would like to know how to add my custom CSS (for some default styling) and still be able to override it with the block settings.
Even if the specificity is the same (like in the image above), I cannot use block settings to style it anymore.
-
Hi there,
Additional CSS in the Customizer is printed inline just before the closing
</head>tag so it will come after the majority of other styles loading on that page.To get around that you would need to load your CSS using a hook or a child theme stylesheet.
But i am not familiar with the blocksy theme, and it maybe there that you need to ask for support. -
Thanks.
I’m working on both fronts 🙂
But even with GP theme a simple
.gb-headline + .gb-headline { /* something */ }rule would override in block settings.
So if I want to retain control over my blocks, I have to use child theme CSS?
- You must be logged in to reply to this topic.