Button gets modified with style="color: inherit"


#1

Hi there,
i created a Call to action widget and set the color for the row to red so the headline has red color.
the problem now is that also my button inherits this value and if you hover over it, the text color does not change anymore as it is supposed to be. The reason is, that the -element gets modified by something with style=“color: inherit;”. I dont know where this comes from, in the template file “fp-call-to-action.php” its not there.
Anyone else experiencing this issue?
Here’s the site:
http://peter-jaworski.de
Its in the section “FORDERN SIE JETZT IHR INDIVIDUELLES ANGEBOT AN…”

Thanks for your help


#2

Hey,

It’s not really an issue. We have some JS code that sets color: inherit; to all elements in that row if a color is selected. This way we can be sure that all text is properly visible if the users selects a background color and needs a lighter text color for example.

In your case the problem is you’ve set your color the same as the default primary color. If you plan to keep this color, you can add this to a custom CSS plugin to make it white on hover:


#panel-31-1-0-0 .roll-button.border:hover {
   color: #fff !important;
}


#3

Thanks for the fast reply, it worked.
I thought it’s an issue, since it doesn’t do that in your demo in the “Do you want…”-section. You don’t have this style-modification in your code. How did you do it?


#4

We’re using the Layout Builder widget in the demo (part of the page builder plugin). So we basically have two rows in one. One has the custom color set from the options, the second one doesn’t.