WP_Customize_Color_Control - Color Transparency

[mukesh27]

In wordpress customizer there is no option for transparent color if user don't want to add color. also opacity option is not there is it possible to add this in feature?

php code :

<?php

/* Navigation Background Color */

$wp_customize->add_setting( 'add_navigation_bg_color_header', array(
        'default'                       => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage'
        
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'add_navigation_bg_color_header', array(
        'label'                 => esc_attr__( 'Navigation Background Color', 'paperio' ),
        'section'               => 'add_navigation_section',
        'settings'                      => 'add_navigation_bg_color_header',
        
) ) );

/* End Navigation Background Color */

?>

if we add transparent color in color picker and add new control for rgba() so it's easy to customize any developer and make more functional theme.

[mukesh27]

transparent checkbox option

[celloexpressions]

This was discussed at some length when the color picker was introduced in #21206. I generally still agree with the reasoning there that allowing transparency generally results in a bad experience for end users. A transparent checkbox has been agreed as not a great solution in particular.

RGBA might be an interesting option, and could be a parameter on the color control class so that it's only enabled when a particular feature calls for it. However, it introduces challenges for saving the associated setting and would require new sanitization functions, etc. A similar effect can be achieved by adding a color control followed by a generic control with 'type' => 'range' and building the CSS back out of the two settings on the output side. I don't think core should add the complexity of rgba support to the core control, but does anyone else have opinions here?

[Howdy_McGee]

I think that having color transparency is a necessity. The Customizer has grown and grown since Theme Options has been banned from being baked into themes and it continues to grow. With it comes the complexity of options it must provide. I ran across this also looking for a solution as I want to give my clients an option to change the background color of a box. This is great but without some kind of opacity slider, they are always limited to solid colors.

I agree it's bad UI on text but for things like backgrounds I don't see it as bad UI - it's all in how you use the setting field. I think a checkbox is too black and white and an actual slider with an input is necessary. The best position for it I believe would be underneath the colors swatches, inside or outside the colorpicker container doesn't matter. It should be a horizontal slider with an opacity input on the far right - accepting anything between 0 and 1.

We would need new sanitization functions but I don't see sanitizing RGBA or converting Hex to RGBA to be a difficult task. Either way, I'm all for this proposal!

[wywarren]

For my custom widgets I've implemented it with this plugin: ​https://github.com/PitPik/tinyColorPicker
Still need a way to do it for standard customizer controls though.

[mukesh27]

@wywarren it's WordPress customise control

[wywarren]

I've managed to get my own 3rd party custom color picker into the customizer with transparency options now. If anyone is interested they can message me. I'm not sure if this can be added to the master though.

[mariovalney]

This ticket is the oldest, but looks like #39681 has more details.

[pressthemes1]

Add a peram called stupport alpha.

[pressthemes1]

Allow developer to change color palette.