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