Beaverbuilder CSS is breaking my buttons

Beaver Builder
1

Hi there,
I have a modal popup that shows up whenever a user clicks any links with the URL #register. This modal has two buttons, “Sign Up” and “Cancel”. They are styled by my theme based on bootstrap:
Original button styling

When I added the #register link to a text box on Page Builder, the modal popup buttons were re-styled to be transparent:
Transparent buttons

Upon closer inspection, I see that Beaver Builder adds the following CSS:

.mfp-wrap button {
  background: transparent none repeat scroll 0 0 !important;
  box-shadow: none !important;
}

I’m surprised my modal is in this mfp-wrap div to begin with, since it’s added outside the content area within the footer. I’m also surprised that Beaver Builder restyles all buttons within its broad wrapper. Finally, I’m surprised that it uses the always-to-be-avoided !important flag preventing me from correcting the problem in my own CSS. How can I fix this problem and get my button styling back?

2

Hi Sid,

That looks a bit odd. Can you give us the URL of your site please?

Thanks,

Colin

3

Hi Colin,
Here’s a sample page without Beaver Builder.
and here’s a sample with Beaver Builder.

Try the click to trigger modal link on each page to see this in action.

4

Hi Sid,

I see the problem now. There’s definitely a CSS conflict going on. Any chance you can provide us with a temporary admin using the “Set as private reply” so I can take a quick look at the css behind the modal on that page?

Thanks,

Colin

5

[Content Hidden]

6

[Content Hidden]

7

Hey Sid,

You should be able to override that by adding more class selectors to your styling as well as declaring yours important as well like so…

.mfp-wrap .mfp-content .btn-success {
  background-color: #89c402 !important;
  border-color: #89c402 !important;
}

I did check this and it seems that that styling is a bit redundant. It’s found on our theme, plugin, as well as on the magnific popup CSS that’s builtin on our theme. I’ll have the guys check as maybe there’s no need for that anymore. :slight_smile:

Ben

8

Thanks, Ben! The CSS changes recommended fixed the problem. I had to do it for both .btn-success and .btn-danger as well as for all hover, active and focus states. It gets the job done but still feels hackish so I hope you guys drop the magnific popup button style overrides from the plugin in the future. Thanks again!

9

Hey Sid,

I think we already took care of this on 1.6.4. Do you mind updating to the latest version and see if you still need that additional styling?

Ben

10

You’re correct; the update fixed the issue and no extra styling is necessary. Thanks!

11

Awesome! Have fun with BB! :slight_smile:

Ben