A lot of the time Beaver Builder bakes in the style (such as with the content slider module) with a span element and provides for a custom css - however, when I try to target the font-size or color (for example) in css, I can’t override the baked in style.element that declares the font size or color as fixed (as set in the module).
Is there a way of using the custom css to override the baked in style that I’m missing?
Thanks!
Hey John,
Yes, definitely. I am wondering if the way you are going about it isn’t quite the way it needs to be done. To check, ensure you set a class in your custom css and when inserting your class into the actual module, make sure it does not start with the period. It would need to be just the class name in the module settings field. It also is entirely possible with certain styles that you are trying to apply, you may need the !important declaration. Let me know if that helps or if we can be of further assistance.
Best,
Billy
John,
this is a question of specificity. Either your IDs or classes need to be more specific (so to speak “have more weight”) or you use “!important” which is not recommended but at least for development purposes works. As Billy stated you can also add a custom class to the element which helps in the most cases. But for CSS development this should be an exception as well. Because if you do so, you have to remember similar elements and add these classes to them as well. That could make styling very time consuming if you think about a website with 20+ pages or so.
I posted something with regards to CSS together with BB here: External CSS.
In case you don’t know what specificity exactly means: Specificity.
Hope this helps,
Leo
To check, ensure you set a class in your custom css and when inserting your class into the actual module, make sure it does not start with the period.
Hi Billy - thanks, and yes, I don’t include the period in the module’s custom css field. I think I may be having an issue with my caching plugin as I was able to do what I needed to do on one site (with the plugin disabled) but not on the other (with the plugin activated). Will test further. Thanks again.