phpcssredux-framework

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


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?


Solution

  • 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.