Overriding CSS while in the page builder editor

Beaver Builder
1

Hi team!

What is the best way to override custom css while inside the page builder editor? I have some absolutely positioned elements that aren’t selectable once the page builder is turned on, so I’d like them to switch to static. I found .ui-sortable in chrome tools, but is there a better way / better selector?

Also, I find that any custom fonts or button css I use is also being utilized by the page builder, which I actually don’t want. What’s the best way to negate that?

Thanks all.

2

Hey Desmond,

I usually just override the styling from the Chrome Inspector. You could try using an extension though, I’ve used Live CSS Editor before which worked just fine.

Also, I find that any custom fonts or button css I use is also being utilized by the page builder, which I actually don’t want. What’s the best way to negate that?

You’re gonna have to be more specific with your CSS selectors so it doesn’t include those in the Page Builder. Could you cite an example of a styling which affected the builder’s elements as well?

Ben

3

Hey Ben,

I’m actually just concerned with my client’s experience when needing to be able to edit absolute positioned elements while in the Page Builder, not really my own. I’ll try tinkering a bit more with the css.

As for the fonts / buttons styles finding their way into the editor, it is really anything that is generally applied (I guess that makes sense?). Meaning, if I have styled body typography (on the Body element) the page builder inherits that. I use a custom starter theme using Bourbon + Neat + Bitters and it is just basically compiled SASS of generic boilerplate selectors. Not a huge deal – I’ll see about getting more specific in my markup.

Thanks!

4

Ah, gotcha! You can probably use the method FLBuilderModel::is_builder_active() to check if the builder is active then apply your overriding styling.

function builder_custom_css() {
  if ( FLBuilderModel::is_builder_active() ) { ?>
    <style>
      .class {
        background: red;
      }
    </style>
  <?php }
}
add_action( 'wp_head', 'builder_custom_css' );

If the style’s too general, we should have a reset/normalize styling that counters that. If you could share what styling overrides what button/element on the builder, we could probably add it there as well. :slight_smile:

Ben

5

Hey Desmond,

Another way to override the styling for when the builder is active is by targeting the html class .fl-builder-edit. I guess the method above is a bit overkill. :slight_smile:

Ben

6

Awesome Ben, you rock! Just what I needed.

7

Cool! Enjoy BB! :slight_smile:

Ben