Border setting previews

Developers
1

I am trying to add border settings for an custom element, but how to I add border preview? I looked at how Rows insert border for live preview and there is special JS written just for that situation. Is there a way to include border previews for other elements for custom modules?

2

Hey David,

Depending on how you’re doing things, you may need to write some custom JS as well. However, the standard preview array should work. Here’s an example…

'border_size' => array(
    'type'          => 'text',
    'label'         => __('Border Size', 'fl-builder'),
    'description'   => 'px',
    'preview'       => array(
        'type'          => 'css',
        'selector'      => '.fl-example-text',
        'property'      => 'border-size',
        'unit'          => 'px'
    )
),

'border_color' => array(
    'type'         => 'color',
    'label'        => __('Border Color', 'fl-builder'),
    'preview'      => array(
        'type'         => 'css',
        'selector'     => '.fl-example-text',
        'property'     => 'border-color'
    )
),

Let me know how that goes.

Justin

3

The only way I got it to work was to have the user choose the border type first as in the Row settings. Then when the user choose color and width the live preview kicked in.
I originally was only giving the user the option for color and width with the border type as solid set as a default in the frontend.css.php file. However, that method was not working for live preview and therefore I will give the user the option for border type.

Thanks again Justin.

4

Ah, that makes sense. You can hardcode the border type to the default, that way the preview will work if they don’t select a border type first.

5

I have the border preview working, but what about adding border opacity within preview?
I have border opacity working when the form is saved with php hex to rgba conversions on the frontend.css.php file, but I am trying to see if there is a native way to make it work for live preview.

6

Hey David,

My apologies and I hope this doesn’t come off as rude, but I did just realize that these posts are in our general support forum that’s mainly meant for pre-sales questions. Support of this nature (aside from bugs of course) is typically reserved for Beaver Builder members in either the plugin or theme forums. If you run into any bugs we’ll gladly look into them. There’s also a users group you can join to get help from members of the community… https://www.facebook.com/groups/beaverbuilders/

Thanks,
Justin