default button styles

[Daniel Berdal]

Daniel Berdal

May 4, 2020 at 3:59 pm

I’m setting up my sites so that there will be global button styles and colors controlled via the theme customizer.

If a user adds an “advanced button” I would like my global button style to be used by default. However, if they go into the advanced button color and style settings and choose something custom, I would like the local settings to be used.

With Advanced heading you use color: inherit; and then if users choose colors inside the blog they are added as an inline style. This allows me to easily set a global header color and style, but it can be overridden on a per-block basis. This is what I want.

This is not working with buttons because you use a default inline settings:
style="color: rgb(85, 85, 85); font-style: normal; border-color: rgb(85, 85, 85);"

If I override using global css:
.kt-button {
color: red !important;
border-color: red !important;
}

then the per-block controls no longer.

I understand that maybe you can’t remove default styling at this point in time, but would it be possible to change the block class if the user has left default settings vs choosing custom settings for the block specifically?

That way, I can override a default button, but still allow custom styles.

Any other ideas on how I can achieve the same sort of end goal?