Hi there @moreimpress,
You have to understand, that CSS works in cascade. So the last style read prevails on the previous ones.
It depends which classes are you using to change the background colors, but the custom color set in the block editor should prevail over everything.
If you provide an URL I could tell you in more detail.
I hope this helped you.
Have a good day.
Thank you, @luiscolome
This is my page:
https://moreimpress.com/en/seo-growth/
I set button background color in editor:
.has-border-background-color {
background-color: #E1E1E3;
}
but it hasn’t priority:
button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, input[type='button'], input[type='reset'], input[type='submit'] {
background-color: #fc5f50;
}
I think it is a theme bug .
This setting work correctly only when I set custom color in color picker, without color palette in Button Block properties.
-
This reply was modified 6 years, 5 months ago by
MoreImpress.
-
This reply was modified 6 years, 5 months ago by MoreImpress.
Hey @moreimpress,
No, I don’t think it is a bug. Is just a CSS priority.
If you are using the Block editor button block, which I see you are using, you should use the selector “wp-block-button__link” to give it a background color.
Something like:
.wp-block-button__link {
background-color: #E1E1E3;
}
And yes, you theme, apparently already has some styles for the block editor. So you have to overwrite them or change them.
Thank you @luiscolome
Yes. Chaplin theme set own color palette for block editor. This code, located in function.php file, is very complicated for me. Therefore I write this message here and hope that theme author fix bug in new update.
Hi @moreimpress,
The custom color CSS in Chaplin is definitely pretty complicated, but there’s a limit to how much it can be simplified while retaining the functionality in there now. If you want to overwrite the theme CSS with your own CSS, the easiest way is to add an !important to your CSS, like this:
.has-border-background-color {
background-color: #E1E1E3 !important;
}
That will give it a higher priority than the built-in Chaplin CSS.
— Anders
