[Support request] Bridging CSS bewteen BB and GP

[Lars]

Hello,

I recently bought GP and have been using Beaver Builder for a few years now.

On the new site I am building (using both BB and GP), I’m having a little difficulty getting GP’s style rules (defined in the customizer) to also kick in on BB elements.

For example, the call to action module from BB uses a button with the class ‘fl-button’ added to it. But the style rules defined in the customizer only seems to affect
<button>
elements or elemenths with the class ‘button’.

Example:

Which, makes total sense.. But it will create some redundancy because I will need to configure style rules both in the customizer for GP elements, and in BB for BB elements.
It will have a negative impact on performance, though not a lot, but primarily, it will make the site harder to use for colleagues who aren’t very technical and just expect the all the buttons to look the same basically, when creating posts etc.

Now, you could argue that you don’t really need any of the styles rules from the customizer when you are using BB anyways, but I happen to prefer the way that GP handles those, and it’s nice to have it all in the customizer and not on every single BB element.

So I don’t know the best way forward for this? How do I bridge GP and BB so that styles configured in customizer works on BB elements as well?

[Tom]

Hi there,

I wonder if BB has an option to filter the default button class?

Have you tried adding the button class to your button elements inside BB? Do the styles still conflict if you do that?

Let me know 🙂

[Lars]

Hello Tom,

Not sure I full understand what you mean by filtering the default button class?

I did try adding ‘button’ as a class, but for that specific element, the call to action module, the class is then logically applied to the parent container, which then in return messes up the styling of that.
You cannot add a class to the button on the call to action module directly, but if you used the button module exclusively then of course you could do that.

I tried adding a button in BB, turning off all styling and adding ‘button’ as class, but the styling still messes up. The problem is that the ‘fl-button’ class is still applied and that overrules most of the ‘button’ class styling (it seems).

But, when all that’s said.. Adding ID’s or classes is, in my opinion, bordering on being ‘advanced usage’ of BB and I would just prefer if colleagues could just drag and drop modules as they saw fit, put content in them and not having to worry about whether they need to add a certain class or not.

I am not far enough in using BB and GP together that I can tell whether this will be a problem as well for other modules, maybe it’s only the call to action module that is being tricky here. But generally it would be nice if there was an option in GP to have a prefix function that would automatically align to the page builder in question and add, in this case, ‘fl-button’ as a class to the general ‘button’ style rules.

So that:

.button {
rules..
}

Becomes:

.button, .fl-button {
rules..
}

If you are using BB with GP.

Another option, I guess, could be for BB to ensure that all their styles pertaining to colors and background-colors + typography get a lower priority, somehow.

Essentially, if you add a BB button module, and don’t style it in anyway, it still won’t look anything like the default styled GP buttons.

[David]

Hi there,

talking to a BB man in the know, this is the CSS he uses to control his button styles, as you can see it is not as straight forward as the standard .button class:

https://snippets.cacher.io/snippet/cf193fede1b7cebb51cf

[Author]

Posts