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