Border setting previews

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Custom Module Development / Border setting previews

This topic is: not resolved
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #35269

    davidlab
    Participant

    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?

    #35284

    Justin Busa
    Keymaster

    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

    #35326

    davidlab
    Participant

    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.

    #35354

    Justin Busa
    Keymaster

    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.

    #35554

    davidlab
    Participant

    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.

    #35627

    Justin Busa
    Keymaster

    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

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘Custom Module Development’ is closed to new topics and replies.