Make WordPress Core

Opened 8 years ago

Last modified 3 months ago

#38093 reopened enhancement

WP_Customize_Color_Control - Color Transparency

Reported by: mukesh27's profile mukesh27 Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.5
Component: Customize Keywords: 2nd-opinion
Focuses: ui, javascript Cc:


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 :


/* 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.

Attachments (1)

customizer-color-box.png (18.2 KB) - added by mukesh27 8 years ago.
transparent checkbox option

Download all attachments as: .zip

Change History (11)

8 years ago

transparent checkbox option

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.

8 years ago

#2 @celloexpressions
8 years ago

  • Focuses ui added; administration performance removed
  • Keywords 2nd-opinion added
  • Type changed from feature request to enhancement
  • Version changed from 4.6.1 to 3.5

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?

#3 @Howdy_McGee
7 years ago

  • Summary changed from WP_Customize_Color_Control - there is no option for transparent color to WP_Customize_Color_Control - Color Transparency

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!

#4 @wywarren
7 years ago

For my custom widgets I've implemented it with this plugin:
Still need a way to do it for standard customizer controls though.

#5 @mukesh27
7 years ago

@wywarren it's WordPress customise control

#6 @wywarren
7 years ago

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.

#7 @mariovalney
6 years ago

  • Resolution set to duplicate
  • Status changed from new to closed

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

#8 @SergeyBiryukov
6 years ago

  • Milestone Awaiting Review deleted

#9 @pressthemes1
3 months ago

Add a peram called stupport alpha.

#10 @pressthemes1
3 months ago

  • Resolution duplicate deleted
  • Status changed from closed to reopened

Allow developer to change color palette.

Note: See TracTickets for help on using tickets.