Beaver Themer Field Connection to ACF RGBA Color Picker

To enable transparency colors in RGBA-Mode within Advanced Custom Fields (ACF), a plugin like ACF RGBA Color Picker (https://wordpress.org/plugins/acf-rgba-color-picker/) must be used. In Beaver Themer, when trying to map a Beaver Builder module color field to an ACF field, the only option is to link to the “ACF Option Field - Color.” I’m looking for a way to map the Beaver Builder color field to the “AFC Option Field - RGBA Color Picker.”

What kind of element do you want to color (text?), in which BB module?

There’s a way to fetch an ACF RGBA Color Picker value, using the Custom Content Shortcode plugin:
[field my_acf_rgba_color option=true]

So, if you want to color text, it can be done this way with inline CSS:
<span style="color: [field my_acf_rgba_color option=true];">My text</span>

Also, the regular ACF Color field accepts a rgba value, but it must be typed in the input field, one can’t pick it the UI (so, no absolute need for the extra ACF plugin).

Capture d’écran 2020-04-26 à 00.26.59

Hmm, there’s another way to make Themer field connection support extra ACF fields directly from Themer’s UI (by clicking on the + sign).

It requires this extra plugin by Didou Schol, that extends Themer field connection and ease the custom fields picking by listing them in a dropdown in frontend:

This plugin doesn’t support ACF 3rd party out of the box BUT it offers a simple method to add them to the supported fields.
For ACF RGBA Color Picker, add this filter to function.php:

add_filter( 'easy_acf_accepted_acf_field_types' , 'my_custom_add_acf_field_types' );

/**
 * Callback that adds one or more fieldtypes to the the easy_acf_accepted_field_types filter
 * @param  {array} $fieldtypes array with name->value, label->value pairs
 * @return {array}
 * @since 1.0.0
 */
function my_custom_add_acf_fieldtypes( $fieldtypes ) {
    $new_fieldtypes =  array(
            array( 'name' => 'extended-color-picker'         , 'label' => 'RGBA Color Picker' ),
        );

    $fieldtypes = array_merge( $fieldtypes , $new_fieldtypes );
    return $fieldtypes;
}