[Resolved] problem overriding background colour

[Caroline]

Hi – I’m trying to override the background colour of a button with class .button. However, the code I’m using in my child theme is being overridden by the following:

button, html input[type="button"], input[type="reset"], input[type="submit"], .button, .button:visited {
    color: #ffffff;
    background-color: #666666;
}

According to Chrome dev tools, this is not coming from a style sheet, but from this link http://localhost:8888/northumberlandgreen/thank-you-for-subscribing/?preview_id=107&preview_nonce=50ae75d03b&_thumbnail_id=-1&preview=true

I’ve never seen this before, and I can’t work out why the code is being applied over the code in my child theme. I can override it using !important, but that then overrides the background cover for the hover state. I could probably add an ID and use that to solve the problem, but I’d really like to know where this code is coming from. Can you help?

Thank you!
Caroline

[Leo]

Hi Caroline,

Have you tried using the customizer to change the color?

It should be in Color > Buttons.

If that’s not what you wanted, make sure you are not including this line in your child theme:
https://docs.generatepress.com/article/child-theme-issues/#import

Let me know.

[Caroline]

Thanks Leo – changing it in the Customizer fixed it.

Just wanted to mention that I didn’t have the ‘Colors’ option activated before though, so presumably if I didn’t have the premium version of GP this may have been hard to fix (because I wouldn’t have been able to activate ‘Colors’ to change the setting).

Thanks again for your help!
Caroline

[Leo]

No problem!

[Author]

Posts