How can I set an rgba background-color from Redux Framework color_rgba-type?

Question

I'm trying to add an options in my theme settings to set the background-color of my mobile-menu using Redux Framework. I used the color_rgba type so I can pick a color with opacity.

I see my background-color set on my menu with class 'mobile-menu', but only a HEX value.

Redux::setSection( $opt_name, array(
    'title'      => __( 'Mobile menu', 'redux-framework-demo' ),
    'id'         => 'header-mobile-menu',
    'subsection' => true,
    'fields'     => array(
            'id'       => 'header-mobile-menu-background',
            'type'     => 'color_rgba',
            'title'    => __('Mobile menu background Color', 'redux-framework-demo'), 
            'subtitle' => __('Background color for mobile menu overlay', 'redux-framework-demo'),
            'default'  => array(
                'color'     => '#E2E2E2',
                'alpha'     => 1
            ),
            'transparent' => false,
            'output'   => array(
                'background-color' => '.mobile-menu',
            ),
        ),

) );

How can I make sure I get the rgba color instead of the HEX color?

Answer 1

I am not using output to generate my style as I am handling my styles in a separate PHP file. But I will show you how I have done it and hopefully it can help you.

I think it is also possibly because you are not using a default RGBA value in your setting.

Here is my Field Array:

array(
            'id' => 'the-id-of-my-field-is-here',
            'type' => 'color_rgba',
            'title' => 'my title of my field setting', 
            'subtitle' => esc_html__('My subtitle of my field setting', 'redux-framework-demo'),
            'transparent' => false,
            'default'  => array(
                'color'     => '#E2E2E2',
                'alpha'     => 1
            ),

        ),

in my seperate php file I am calling my option name like so:

//This sets my redux settings in a variable called options    
$options = get_my_theme_options();

Then I am checking if there is a value in my options and if there is, use it in my style like so:

if(!empty($options['the-id-of-my-field-is-here'])) {
    echo'.mobile-menu {
        background-color: '.$options["the-id-of-my-field-is-here"]['rgba'].';
    }';
}

As you can see I am calling the other array at the end like so [rgba]

MY guess would be to perhaps try my way or perhaps add an RGBA value in your default array like so:

'default'  => array(
                'color'     => '#E2E2E2',
                'alpha'     => 1,
                'rgba'      => 'RGBA VALUE HERE'
            ),

I hope this helps in any way.

Answer 2

Based on this reference link : https://docsv3.redux.io/core/fields/color-rgba/index.html

suppose you want to output a color as a background-color, instead of color. The following output array in key/pair format would accomplish this:

'output' => array('background-color' => '.site-header')

Alternatively, multiple elements could be specified for different selectors.

'output' => array(
'background-color' => '.site-header',
'color'            => '.site-footer')

Multiple selectors are also supported. Separate them with commas.

'output' => array('background-color' => '.site-header, .site-footer')