I’m using a managed version of BeaverBuilder with a Genesis Pro theme (this is not my choice - this is what my web hosting provider gives us to use).
For the same reason, I have no access at all to backend files to edit CSS files directly.
The only thing I can do is to add Custom CSS to the theme (or to BeaverBuilder itself but I prefer to keep all the Custom CSS together and it has to apply to non-BB pages too).
Some fl-builder styles that seem to have been set by default are triggering and I can’t figure out how to overwrite them.
Specifically, I want to do something fairly simple:
create a class for a default button style so that I can have one standard button style across the entire site, without having to change the settings every single time, for all the reasons.
I want the button to have one text color and one background color that changes to another set of colors on hover.
But there is a class here that I cannot override:
.fl-builder-content a.fl-button *
When I just try to override this class in my custom CSS by referencing it, it applies the styles to EVERYTHING underneath the class and I end up with two overlapping buttons – one for the outer a.fl-button class, and one for the span.fl-button-text class.
When I try to override them individually so that I set the background color for a.fl-button, but set the text color for span.fl-button-text it looks OK but the hover doesn’t work - it doesn’t change color until the pointer is over the text but the button changes color the moment the pointer is over the whole button.
And this makes sense because the color is being set for span.fl-button-text so it’s not going to change until the pointer is over the span.
What I really want to do is just get rid of the style altogether. It literally looks like this:
.fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * {
color: #333;
}
I cannot for the life of me figure out where that’s coming from!!