Suggestion

Hey Oliver,

Each module has its own class that identifies it. For example, the heading module has the “.fl-module-heading” class. Could you not use those to interact with the modules via CSS or JS?

Justin

Hi Justin,

The thing is that I need to allow my theme users to add a custom class to a module/shortcode, which sometimes brings a new functionality.

As an example: https://themedemos.webmandesign.eu/mustang/shortcodes/testimonials/ If you add a class of masonry to the shortcode, the layout will rebuilt. This class from the shortcode will apply directly on the actual shortcode wrapper. When using the class parameter in Beaver Builder, it applies the class both for the module wrapper (the div.fl-module) and the actual shortcode. While this example might work just fine, it causes unnecessary code bloating, I think.

Thanks.

Oliver

Hi Oliver,

Thanks for the additional explanation. We’re not opposed to adding new filters but our concern is that adding additional classes to the module wrappers could cause conflicts elsewhere. Could you possibly create a wrapper of your own in frontend.php? That’s what a lot of the builtin modules are doing.

Justin

Hi Justin,

I’m with you on this one. But I feel there is a bit of misunderstanding on what I propose here ??

I do not want to add any additional classes to the module wrappers. Actually, the exact opposite.

Currently you can add you own classes to module wrappers via module settings form, “Advanced” tab: https://awesomescreenshot.com/00446sp0c1 This would produce this module wrapper code:

<div class="fl-module fl-module-$ fl-node-# bg-red" data-node="#" data-animation-delay="#">
  <div class="fl-module-content fl-node-content">
    THE ACTUAL MODULE OUTPUT HERE FROM FRONTEND.PHP
  </div>
</div>

Now let’s say, I am adding a custom “Button” module with this code in the module’s frontend.php file:

echo '<a href="' . $settings->url . '" class="button ' . $settings->class . '">' . $settings->content . '</a>';

So, the actual “Button” module output in website frontend would look like this (with a module wrappers applied by Beaver Builder):

<div class="fl-module fl-module-button fl-node-# bg-red" data-node="#" data-animation-delay="0.0">
  <div class="fl-module-content fl-node-content">
    <a href="#" class="button bg-red">Button text</a>
  </div>
</div>

Please notice the doubled bg-red class applied both on module wrapper DIV and the actual button A tag. If the class applies a red background color, this would colorize both the button and the module wrapper, which is not desirable.

So, with my original proposition when applying the filter on the custom module class only, I can do this in my theme’s functions.php file to get rid of the custom class applied on the module wrapper:

add_filter( 'render_module_class', '__return_empty_string' );

(*) Please note that this is just for our example. There is a $module variable passed into the filter, so you can actually do this for specific modules only.

And this would resolve my issue as it would remove the bg-red class from the module wrapper and the module output code would look like:

<div class="fl-module fl-module-button fl-node-#" data-node="#" data-animation-delay="0.0">
  <div class="fl-module-content fl-node-content">
    <a href="#" class="button bg-red">Button text</a>
  </div>
</div>

Please, let me know if you have any more additional questions on why do I propose this and thank you very much for consideration (and your prompt replies, of course ?? )!

Best regards,

Oliver

OK, I think I should actually propose the filter by a different name. render_module_class should be render_module_custom_class or something like that ??

Hey Oliver,

Thanks for the detailed explanation. After reviewing we’re still not convinced that this filter would be necessary and would actually be more coding on your end than would be needed if you used a selector chain.

Wouldn’t something like this solve your problem?

.bg-red a.button { background: #ff0000; }

Justin

Hi Justin,

Well, solution via CSS would bring more coding actually. I use quite a few classes in my shortcodes to change even a shortcode behavior via JS. By adding additional lines of code to target the shortcode behavior in .fl-module wrapper would only increase the CSS file size, while this could be resolved with a single line in theme’s functions.php.

Besides, I’d like to add a support for Beaver Builder to my older themes and this would require adding additional stylesheet for overriding existing CSS when page builder is applied.

I’m not asking you to remove the functionality from your plugin, not even changing or removing a plugin classes. Just add a more flexibility so the render_module_class method in classes/FLBuilder.php file would change from:

/**
 * @method render_module_class
 */
static public function render_module_class($module)
{
    echo 'fl-module';
    echo ' fl-module-' . $module->settings->type;
    echo ' fl-node-' . $module->node;

    if(!empty($module->settings->class)) {
        echo ' ' . $module->settings->class;
    }
    if(!empty($module->settings->responsive_display)) {
        echo ' fl-visible-' . $module->settings->responsive_display;
    }
    if(!empty($module->settings->animation)) {
        echo ' fl-animation fl-' . $module->settings->animation;
    }
}

to

/**
 * @method render_module_class
 */
static public function render_module_class($module)
{
    echo 'fl-module';
    echo ' fl-module-' . $module->settings->type;
    echo ' fl-node-' . $module->node;

    if(!empty($module->settings->class)) {
        echo ' ' . $module->settings->class;
    }
    if(!empty($module->settings->responsive_display)) {
        echo apply_filters( 'render_module_custom_class ', ' ' . $module->settings->class, $module );
    }
    if(!empty($module->settings->animation)) {
        echo ' fl-animation fl-' . $module->settings->animation;
    }
}

Thanks for your patience!

Regards,

Oliver

Hey Oliver,

We’re not opposed to adding things like this but we are cautious as we get a lot of requests and try to make sure that we’re not bloating the codebase with things that only serve an edge case and not a wider audience. It’s hard to say if that’s true here, but given that there is already a solution using CSS, we’re leaning towards not including that filter. We could be wrong though, so I invite you to add this request to our feedback forum for other users to vote on. Thanks for understanding!

Justin

Hi Justin,

Thanks for the input. I wouldn’t ask you this if it was an edge case, serving only me. Actually, I’ve found workarounds for other implementation “issues” I’ve had, so I really do pick what I request here ??

I think many of developers could benefit from this change as I can image further scenarios of not just removing the class, like it is in my case, but also changing them.

Anyway, I’ve created a new post on your feed back forum.

Thanks and regards,

Oliver

Thanks, Oliver. I’ve made a note to look into adding some filters and how best to implement them.

Justin

Thanks. Marking this thread as resolved. Further communication at https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/6966515-allow-filtering-custom-css