Button Color issues

  • 1. After set Button Color & Button Background Color in Customizer I can not change it in Page Block Editor if Primary Color not default.
    2. Heading Text color change after Button Background Color setting.
    and some other problems with these color setting …

Viewing 5 replies - 1 through 5 (of 5 total)

  • 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.

    Thread Starter MoreImpress

    (@moreimpress)

    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 4 years, 11 months ago by MoreImpress.
    • This reply was modified 4 years, 11 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.

    Thread Starter MoreImpress

    (@moreimpress)

    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.

    Theme Author Anders Norén

    (@anlino)

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Button Color issues’ is closed to new replies.