So the other day I purchased the theme and plugin, and I am having fun converting “old” Divi sites into BB sites.
But I have a problem with some CSS entries that won’t work unless I use “!important”. It seems that the changes I make get overwritten by the the less/cached version for some entities but others are easily changeable.
For instance I can change the background color of a “fl-button” without a problem, but my custom padding, for the same button, is not working unless I use “!important”.
I am using the child-theme as I normally would, but how can I make all my custom stuff work without using “!important” all the time?
Can you paste an example of CSS where you are having to use important? It could be that your selectors aren’t specific enough. I’ll know once I see the code.
For instance I had an issue with the standard button object. With the following selector I could only change the background color:
a.fl-button
As you mention, if the inspector is a bit more specific I can change everything:
.fl-button-wrap.fl-button-width-auto a.fl-button
Something is still a bit odd though. Even if I do use the more precise selectors and it is working as it should, the inspector in Google Chrome indicates that the previous has been overwritten with another bunch of selectors (see image)?
I haven’t seen that before with other themes, but maybe it is a common “issue”?
Thanks for the additional info. I’m not entirely sure what the issue is yet, but we’ll get to the bottom of it. Could you possibly shoot me a link to a page with a button that you’re having trouble with?
Thanks for your reply Justin. Judging by your answer it looks like we are getting things mixed up I will try and explain a bit further.
I have no online site, right now I am working locally.
First of all I have no problem with the background-color I can change that. With your selectors I am not able to change the border-radius and the padding at all.
But as I showed with my selector I was able to change everything, so you could say I don’t have any problems using that selector.
But if you look at the attached image all my strange demo settings are in effect (both padding, borders etc.) But the Chrome inspector have indicated they are not in use even though they clearly are.
Bottomline it is working, but why on earth are all my values returning with a line trough?
I am wondering if the issue I am seeing is because I am doing all my edits in the child theme style.css file? I mean the CSS for the button “belongs” to a plugin and not the BB theme.
What is the right way to style the Builder objects? I mean if I remove the BB-theme and use another theme instead the custom styles would be gone…
First of all I have no problem with the background-color I can change that. With your selectors I am not able to change the border-radius and the padding at all.
It looks like the issue is that the builder’s selectors are specific for each button like so…
So when you try to use global CSS selectors to change all buttons, they are being overridden for the few properties the button module applies to each button via the settings panel.
Bottomline it is working, but why on earth are all my values returning with a line trough?
I’m not entirely sure on this one. I have seen that happen even when coding stuff from scratch (it says bootstrap is overriding my stuff when it’s not). Maybe just a quirk.
I am wondering if the issue I am seeing is because I am doing all my edits in the child theme style.css file? I mean the CSS for the button “belongs” to a plugin and not the BB theme.
No, that’s definitely the way to go about it. The theme has some default styling for buttons on things like comment forms or for WooCommerce but that’s the only element it shares with the builder or even tries to style. So, that may be where the confusion is. The theme doesn’t have CSS for any of the other builder elements.
What is the right way to style the Builder objects? I mean if I remove the BB-theme and use another theme instead the custom styles would be gone..
You’re doing it right. I think the buttons are just a bit tricky. The builder leaves as much of the style up to the theme as it can. So if you switch themes, it will mostly take on the style of the new theme.
I will try and explain a bit further.
The theme has some default styling for buttons on things like comment forms or for WooCommerce but that’s the only element it shares with the builder or even tries to style. So, that may be where the confusion is. The theme doesn’t have CSS for any of the other builder elements.