Just bought the BB plugin to use with the genesis framework. I just made the switch from Divi to BB and I’m having some issues. I love the workflow of BB, but its a little difficult to do global styling.
First of all is there a place where i can take a look at all the default css styles for all the modules? I took a quick look around but a lot of the CSS files don’t seem to relate the the front end styling.
Secondly is there a way to style span tags by selecting the parent class instead? Reason why i am asking this is because some of the main modules are all using span tags to input content.
Finally i have read on multiple forum postings about Css specificity. Generally speaking how specific do i need to get for best practices?
What do you mean by global styling? Are you referring to adding custom CSS to style all Photo modules for example? As all modules are given a unique class related to that module. For example, the Text module has a global class called fl-module-rich-text that is associated to all Text modules.
Each module has contains a directory called CSS, in that directory there is a frontend.css file. Which includes all the styling specific to that module. Everything is else is from either the module settings you choose or basic styling for modules/rows etc… from the theme css.
You could try using .parent-class span. However, if you want to target a span why not use the class that is associated to it?
One of the best ways to override default styling is to use either the ID or class option for that module. You can then use that class to prefix your styling which should override the default styles. For example:
My workflow with the divi builder was to create layouts and then code the entire module’s styles (global style). A module in a layout that needed its own style would be assigned a id or class, and styled separately. This would allow my clients to create their own layouts in the future, while allowing them to maintain a consistent look that we develop for them.
Im trying to keep the same workflow. I guess a better question would be is there some sort of visual reference that breaks down the classes used? Good example would be Gravity Forms Visual Guide. If you guys don’t have one its ok, I may build one in the future!
Lets say I’m trying to attach a global style to a button:
This gives the span its own hover property.So when the hover is over the button, but not over the span - span won’t change colors. This was one small thing i came across, but i noticed most of the commonly used modules used span.
Unfortunately, we do not have any visual guide like Gravity Forums. However, if you have time, please feel free to post this suggestion on our UserVoice.
I am able to add either an ID or class to the Buttons module and use that ID to give the button a hover background color without having target the span.