New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable rgba Colors #13

Open
SeanBlakeley opened this Issue Feb 26, 2013 · 37 comments

Comments

Projects
None yet
@SeanBlakeley

SeanBlakeley commented Feb 26, 2013

It'd be great if the color picker could output a rgba color and offer users an opacity option.

Cheers,

Sean.

@mattwiebe

This comment has been minimized.

Show comment
Hide comment
@mattwiebe

mattwiebe Feb 26, 2013

Contributor

The underlying color library already speaks rgba fluently, it's just that the UI doesn't have an opacity slider.

Contributor

mattwiebe commented Feb 26, 2013

The underlying color library already speaks rgba fluently, it's just that the UI doesn't have an opacity slider.

@Traik

This comment has been minimized.

Show comment
Hide comment
@Traik

Traik Mar 29, 2013

Agree, that would be an awesome improvement to have rgba() :) It's good to hear that it's almost there. Thank you for making this great colorpicker!

Traik commented Mar 29, 2013

Agree, that would be an awesome improvement to have rgba() :) It's good to hear that it's almost there. Thank you for making this great colorpicker!

@MrVibe

This comment has been minimized.

Show comment
Hide comment
@MrVibe

MrVibe commented Apr 9, 2013

+1

@corradomatt

This comment has been minimized.

Show comment
Hide comment
@corradomatt

corradomatt Aug 9, 2013

I would love to see this featured added to Iris. Possibly even an option to allow for a transparent value as well as noted here - http://core.trac.wordpress.org/ticket/21059#comment:7

corradomatt commented Aug 9, 2013

I would love to see this featured added to Iris. Possibly even an option to allow for a transparent value as well as noted here - http://core.trac.wordpress.org/ticket/21059#comment:7

@TeaMike

This comment has been minimized.

Show comment
Hide comment
@TeaMike

TeaMike Oct 1, 2013

Trying to add opacity to my theme i'd like to add my vote. Unfortunately i am not a programmer but i found some input which might be helpful:

TeaMike commented Oct 1, 2013

Trying to add opacity to my theme i'd like to add my vote. Unfortunately i am not a programmer but i found some input which might be helpful:

@RiccardoB

This comment has been minimized.

Show comment
Hide comment
@RiccardoB

RiccardoB commented Nov 8, 2013

+1

@eliorivero

This comment has been minimized.

Show comment
Hide comment
@eliorivero

eliorivero Feb 5, 2014

I totally agree with this. A secondary slider for transparency like Minicolors does would be good.

http://labs.abeautifulsite.net/jquery-minicolors/#opacity (first color picker on the left)

The change callback would have to be updated as well, providing the alpha value.

eliorivero commented Feb 5, 2014

I totally agree with this. A secondary slider for transparency like Minicolors does would be good.

http://labs.abeautifulsite.net/jquery-minicolors/#opacity (first color picker on the left)

The change callback would have to be updated as well, providing the alpha value.

@bitcommit

This comment has been minimized.

Show comment
Hide comment
@bitcommit

bitcommit Feb 18, 2014

Hello,

This issue was opened a year ago, are there any news about implementing an opacity slider?

Thanks!

bitcommit commented Feb 18, 2014

Hello,

This issue was opened a year ago, are there any news about implementing an opacity slider?

Thanks!

@RiccardoB

This comment has been minimized.

Show comment
Hide comment
@RiccardoB

RiccardoB Feb 18, 2014

As far as I know, there are no news about it.

RiccardoB commented Feb 18, 2014

As far as I know, there are no news about it.

@mattwiebe

This comment has been minimized.

Show comment
Hide comment
@mattwiebe

mattwiebe Feb 18, 2014

Contributor

The news is simple: neither the WordPress project nor I have needed this, so there are no plans for me/us to do this at present.

Of course, this is open source: anyone could implement it and submit a PR. I would be open to working with them to get it to a merge-able state.

Contributor

mattwiebe commented Feb 18, 2014

The news is simple: neither the WordPress project nor I have needed this, so there are no plans for me/us to do this at present.

Of course, this is open source: anyone could implement it and submit a PR. I would be open to working with them to get it to a merge-able state.

@stevenmunro

This comment has been minimized.

Show comment
Hide comment
@stevenmunro

stevenmunro Jul 22, 2014

I have created a short tutorial on how to implement alpha/opacity support. Please check it out

http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/

stevenmunro commented Jul 22, 2014

I have created a short tutorial on how to implement alpha/opacity support. Please check it out

http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/

@jjeaton

This comment has been minimized.

Show comment
Hide comment
@jjeaton

jjeaton Nov 21, 2014

@mattwiebe what are the chances of merging this PR submitted back in June? #40

jjeaton commented Nov 21, 2014

@mattwiebe what are the chances of merging this PR submitted back in June? #40

@mattwiebe

This comment has been minimized.

Show comment
Hide comment
@mattwiebe

mattwiebe Nov 24, 2014

Contributor

I looked into merging the PR but:

  1. It's out of sync and too much work was required to fix that
  2. It's not implemented in a manner I'm happy with.
Contributor

mattwiebe commented Nov 24, 2014

I looked into merging the PR but:

  1. It's out of sync and too much work was required to fix that
  2. It's not implemented in a manner I'm happy with.
@jjeaton

This comment has been minimized.

Show comment
Hide comment
@jjeaton

jjeaton Nov 24, 2014

@mattwiebe understood on the first point. We use the color picker extensively in our plugin, and are looking at implementing an alpha slider as well. I'd love to be able to submit our changes back to Iris itself, could you expand a bit on why the other PR isn't implemented how you'd want it? Just so I can avoid doing the same things. Thanks!

jjeaton commented Nov 24, 2014

@mattwiebe understood on the first point. We use the color picker extensively in our plugin, and are looking at implementing an alpha slider as well. I'd love to be able to submit our changes back to Iris itself, could you expand a bit on why the other PR isn't implemented how you'd want it? Just so I can avoid doing the same things. Thanks!

@cluke009

This comment has been minimized.

Show comment
Hide comment
@cluke009

cluke009 Nov 25, 2014

@mattwiebe I am interested in point 2 as well. I would be willing to work on this as I also have an in house plugin that depends on color picker and would rather not hack my own in just for alpha support.

cluke009 commented Nov 25, 2014

@mattwiebe I am interested in point 2 as well. I would be willing to work on this as I also have an in house plugin that depends on color picker and would rather not hack my own in just for alpha support.

@mattwiebe

This comment has been minimized.

Show comment
Hide comment
@mattwiebe

mattwiebe Nov 25, 2014

Contributor

could you expand a bit on why the other PR isn't implemented how you'd want it?

Sure, from my closing comment in #40:

The slider would need to be a 2nd vertical slider, to the right of the existing one, not a horizontal one beneath the picker.

Contributor

mattwiebe commented Nov 25, 2014

could you expand a bit on why the other PR isn't implemented how you'd want it?

Sure, from my closing comment in #40:

The slider would need to be a 2nd vertical slider, to the right of the existing one, not a horizontal one beneath the picker.

@cluke009

This comment has been minimized.

Show comment
Hide comment
@cluke009

cluke009 Nov 26, 2014

Added in the vertical slider to master cluke009@48afa02. It needs CSS and some code to compensate for the width calculation but it might be enough to get someone else started.

Probably won't be able to look at this again til after the holiday.

cluke009 commented Nov 26, 2014

Added in the vertical slider to master cluke009@48afa02. It needs CSS and some code to compensate for the width calculation but it might be enough to get someone else started.

Probably won't be able to look at this again til after the holiday.

@Codestar

This comment has been minimized.

Show comment
Hide comment
@Codestar

Codestar Dec 29, 2014

Hi,

I am following this topic since 2013, hmm i think we will use own modifications for this feature. i just created a GPL Plugin for this. you can use it for your projects ;)

screenshot

Repo: https://github.com/Codestar/codestar-wp-color-picker

Codestar commented Dec 29, 2014

Hi,

I am following this topic since 2013, hmm i think we will use own modifications for this feature. i just created a GPL Plugin for this. you can use it for your projects ;)

screenshot

Repo: https://github.com/Codestar/codestar-wp-color-picker

@kallookoo

This comment has been minimized.

Show comment
Hide comment
@kallookoo

kallookoo Jan 16, 2015

Hi,
As needed using rgba one of my plugins I created an extension with other visual customizations of the iris plugin to activate the rgba in wpColorPicker without calling other plugins like @stevenmunro or @Codestar, you only need to add on the label input a class and a data, and obviously call my script to activate, use css3 and I've only tested in firefox.
It currently only works when the element is an input, it may be that change it in the future.
This repo is: https://github.com/kallookoo/wp-color-picker-alpha

Edited:
older nick: 23r9i0

kallookoo commented Jan 16, 2015

Hi,
As needed using rgba one of my plugins I created an extension with other visual customizations of the iris plugin to activate the rgba in wpColorPicker without calling other plugins like @stevenmunro or @Codestar, you only need to add on the label input a class and a data, and obviously call my script to activate, use css3 and I've only tested in firefox.
It currently only works when the element is an input, it may be that change it in the future.
This repo is: https://github.com/kallookoo/wp-color-picker-alpha

Edited:
older nick: 23r9i0

@Codestar

This comment has been minimized.

Show comment
Hide comment
@Codestar

Codestar Jan 16, 2015

@23r9i0 nice alternative, i liked ;) and i hope Iris/Owner will make an update for this alpha request :)

Codestar commented Jan 16, 2015

@23r9i0 nice alternative, i liked ;) and i hope Iris/Owner will make an update for this alpha request :)

@dgwyer

This comment has been minimized.

Show comment
Hide comment
@dgwyer

dgwyer Feb 16, 2015

It would be very useful to have optional transparency added to the current color picker, so you could add certain color pickers with transparency when needed. The 'default' color picker control could then be used for all other colors.

My use case is that I need background colors to support transparency so they can either be set to a specific color, or transparent (to show through colors underneath).

e.g. The built-in background color picker changes the background color of the body tag. If I wanted to add a color picker, say, for the footer background then I can use the standard color picker BUT I have no way to set the opacity to zero if I wanted to remove the footer background color and show through the body background color.

dgwyer commented Feb 16, 2015

It would be very useful to have optional transparency added to the current color picker, so you could add certain color pickers with transparency when needed. The 'default' color picker control could then be used for all other colors.

My use case is that I need background colors to support transparency so they can either be set to a specific color, or transparent (to show through colors underneath).

e.g. The built-in background color picker changes the background color of the body tag. If I wanted to add a color picker, say, for the footer background then I can use the standard color picker BUT I have no way to set the opacity to zero if I wanted to remove the footer background color and show through the body background color.

@marcwiest

This comment has been minimized.

Show comment
Hide comment
@marcwiest

marcwiest Feb 28, 2015

plus 1 for transparency control

marcwiest commented Feb 28, 2015

plus 1 for transparency control

@BraadMartin

This comment has been minimized.

Show comment
Hide comment
@BraadMartin

BraadMartin Mar 20, 2015

+1 for this feature.

@mattwiebe Can you tell us why you prefer the opacity slider to be vertical and next to the color slider? Both Chrome and Firefox devtools have the opacity slider below like some of the examples in this thread, and in the Customizer there isn't quite enough horizontal space for a second vertical slider to fit unless the overall size of Iris were to get narrower (on desktop view the customizer controls area is only 300px wide including the scroll bar, and stock Iris is already 257px wide).

I recently tried to add the opacity slider as a vertical slider so that I could send a PR to you, but I couldn't get it to fit in the Customzer in a way that felt right, so for my purposes ended up with this:

iris-color-picker

Personally I like having the opacity slider more separated from the color slider because it makes it more clear to the user that the two sliders do different things, and it matches the Chrome and Firefox devtools.

Would you be open to considering this approach or are you set on having the second vertical slider?

BraadMartin commented Mar 20, 2015

+1 for this feature.

@mattwiebe Can you tell us why you prefer the opacity slider to be vertical and next to the color slider? Both Chrome and Firefox devtools have the opacity slider below like some of the examples in this thread, and in the Customizer there isn't quite enough horizontal space for a second vertical slider to fit unless the overall size of Iris were to get narrower (on desktop view the customizer controls area is only 300px wide including the scroll bar, and stock Iris is already 257px wide).

I recently tried to add the opacity slider as a vertical slider so that I could send a PR to you, but I couldn't get it to fit in the Customzer in a way that felt right, so for my purposes ended up with this:

iris-color-picker

Personally I like having the opacity slider more separated from the color slider because it makes it more clear to the user that the two sliders do different things, and it matches the Chrome and Firefox devtools.

Would you be open to considering this approach or are you set on having the second vertical slider?

@corradomatt

This comment has been minimized.

Show comment
Hide comment
@corradomatt

corradomatt Mar 20, 2015

@BraadMartin - that looks awesome. I agree with having the 2 sliders on different axis'...makes for a better user experience.

corradomatt commented Mar 20, 2015

@BraadMartin - that looks awesome. I agree with having the 2 sliders on different axis'...makes for a better user experience.

@stevenmunro

This comment has been minimized.

Show comment
Hide comment
@stevenmunro

stevenmunro Mar 20, 2015

@BraadMartin Glad you like the way I've done it too. Visually, your slider looks identical to mine. However I know with my version, the code can be improved. (see above for link)

stevenmunro commented Mar 20, 2015

@BraadMartin Glad you like the way I've done it too. Visually, your slider looks identical to mine. However I know with my version, the code can be improved. (see above for link)

@SilverSting

This comment has been minimized.

Show comment
Hide comment
@SilverSting

SilverSting commented Apr 2, 2015

+1

@rohmann

This comment has been minimized.

Show comment
Hide comment
@rohmann

rohmann May 28, 2015

Hey @mattwiebe, it's been a while since we've heard from you, so just wondering if you had any thoughts here.

Many would agree this is greatly needed, but I'd imagine reading comments like "It's not implemented in a manner I'm happy with." is a huge turn off to anyone else considering making a pull request.

Just wanted to see if this is on the radar, or will be soon. Thanks!

rohmann commented May 28, 2015

Hey @mattwiebe, it's been a while since we've heard from you, so just wondering if you had any thoughts here.

Many would agree this is greatly needed, but I'd imagine reading comments like "It's not implemented in a manner I'm happy with." is a huge turn off to anyone else considering making a pull request.

Just wanted to see if this is on the radar, or will be soon. Thanks!

@mattwiebe

This comment has been minimized.

Show comment
Hide comment
@mattwiebe

mattwiebe May 28, 2015

Contributor

Apologies for the neglect, Iris just isn't a priority for me at the moment. I would like to see this land at some point.

Contributor

mattwiebe commented May 28, 2015

Apologies for the neglect, Iris just isn't a priority for me at the moment. I would like to see this land at some point.

@rohmann

This comment has been minimized.

Show comment
Hide comment
@rohmann

rohmann May 29, 2015

Sure thing. Totally understand. Really appreciate you letting us know, and really glad to hear the feature it's still something being considered.

Aside from what you've said so far about the alpha slider being next to the other slider, any other considerations to keep in mind for a PR?

rohmann commented May 29, 2015

Sure thing. Totally understand. Really appreciate you letting us know, and really glad to hear the feature it's still something being considered.

Aside from what you've said so far about the alpha slider being next to the other slider, any other considerations to keep in mind for a PR?

@BraadMartin

This comment has been minimized.

Show comment
Hide comment
@BraadMartin

BraadMartin Jun 13, 2015

For anyone interested in using an Alpha Color Picker control in the Customizer, I've spent some time making improvements to some of the solutions mentioned in this thread and now have a drop-in control class that's super easy to use. Here it is in action:

Alpha Color Picker in action

All of the code for the control is available on Github.

I've added some nice things like support for passing a palette as an array of color values when registering the control, animated transitions on the opacity slider in all situations (even when clicking a palette color or the default color button), clickable zones on either side of the slider to make it easier to reach alpha values of 0 or 100, and more. I also formatted everything to match the WP coding standards and added inline documentation to help others understand and modify things as they wish.

I'm sure it's not perfect, but it's been working great for me. Feel free to fork it and use it in your plugins and themes, and let me know if you find any issues or opportunities for improvements. More information can be found in this blog post.

BraadMartin commented Jun 13, 2015

For anyone interested in using an Alpha Color Picker control in the Customizer, I've spent some time making improvements to some of the solutions mentioned in this thread and now have a drop-in control class that's super easy to use. Here it is in action:

Alpha Color Picker in action

All of the code for the control is available on Github.

I've added some nice things like support for passing a palette as an array of color values when registering the control, animated transitions on the opacity slider in all situations (even when clicking a palette color or the default color button), clickable zones on either side of the slider to make it easier to reach alpha values of 0 or 100, and more. I also formatted everything to match the WP coding standards and added inline documentation to help others understand and modify things as they wish.

I'm sure it's not perfect, but it's been working great for me. Feel free to fork it and use it in your plugins and themes, and let me know if you find any issues or opportunities for improvements. More information can be found in this blog post.

@NotAmaan

This comment has been minimized.

Show comment
Hide comment
@NotAmaan

NotAmaan Jun 22, 2015

@BraadMartin Does this output the opacity value as 0? For example, can is it able to set rgba(255,255,255,0) as a value? The current rgba picker I'm using doesn't support it.

EDIT: Just tried it and it works. Awesome!

NotAmaan commented Jun 22, 2015

@BraadMartin Does this output the opacity value as 0? For example, can is it able to set rgba(255,255,255,0) as a value? The current rgba picker I'm using doesn't support it.

EDIT: Just tried it and it works. Awesome!

@weavertheme

This comment has been minimized.

Show comment
Hide comment
@weavertheme

weavertheme Sep 24, 2015

@BraadMartin -
Your class looks great, but unfortunately it will not pass muster with the WP Theme Review team because it has no license specified. Just a line "feel free to use this" does not qualify as a GPL compatible license.

If no one has used your control in a theme yet, it is because it is not GPL compatible. Just add a license line to the source code or readme, please.

weavertheme commented Sep 24, 2015

@BraadMartin -
Your class looks great, but unfortunately it will not pass muster with the WP Theme Review team because it has no license specified. Just a line "feel free to use this" does not qualify as a GPL compatible license.

If no one has used your control in a theme yet, it is because it is not GPL compatible. Just add a license line to the source code or readme, please.

@BraadMartin

This comment has been minimized.

Show comment
Hide comment
@BraadMartin

BraadMartin Sep 25, 2015

@weavertheme My bad, I figured that because my Alpha Color Picker is dependent on Iris (which is GPL) it would automatically be considered GPL, but I've just added the explicit GPL references in the PHP file and in the readme for both my Alpha Color Picker and Multi Color Picker, so both are now 100% GPL.

BraadMartin commented Sep 25, 2015

@weavertheme My bad, I figured that because my Alpha Color Picker is dependent on Iris (which is GPL) it would automatically be considered GPL, but I've just added the explicit GPL references in the PHP file and in the readme for both my Alpha Color Picker and Multi Color Picker, so both are now 100% GPL.

@karimhossenbux

This comment has been minimized.

Show comment
Hide comment
@karimhossenbux

karimhossenbux Nov 2, 2016

Is it worth it to work on that feature? I could try to do a PR but I would hate losing time for nothing if at the end it's not merged :(

This feature even if it's not a top priority, could help a lot of people and push a little more some design.

Cheers!

karimhossenbux commented Nov 2, 2016

Is it worth it to work on that feature? I could try to do a PR but I would hate losing time for nothing if at the end it's not merged :(

This feature even if it's not a top priority, could help a lot of people and push a little more some design.

Cheers!

@pingram3541

This comment has been minimized.

Show comment
Hide comment
@pingram3541

pingram3541 Jan 9, 2017

Anyone like the idea of making the color value field horizontally large enough to see a complete rgba value without having to key over? I have no issues with letting the default button wrap to the next line or even putting it somewhere else sensibly.

pingram3541 commented Jan 9, 2017

Anyone like the idea of making the color value field horizontally large enough to see a complete rgba value without having to key over? I have no issues with letting the default button wrap to the next line or even putting it somewhere else sensibly.

@tradesouthwest

This comment has been minimized.

Show comment
Hide comment
@tradesouthwest

tradesouthwest Feb 12, 2017

Let's move on this. There is so much [touted] value that WP gives to the Customizer and I as well as many top level programmers do not like using Customizer on any production website. So if you are going to value the Customizer then make it usable and UX friendly. Opacity to a background would mean that I can now use a body (tag) background-image and then a main content background-color opacity attribute that can make my body background image viewable from behind the content div.

If WP does not do this then it is up to the users to hack up the CSS. WP has too many CSS "utensils" all over the admin. (CSS editing in the Customizer, CSS in the editors, CSS in the themes....) We don't need more choices for non-programmers. Just more utensils that work, for non-programmers.

tradesouthwest commented Feb 12, 2017

Let's move on this. There is so much [touted] value that WP gives to the Customizer and I as well as many top level programmers do not like using Customizer on any production website. So if you are going to value the Customizer then make it usable and UX friendly. Opacity to a background would mean that I can now use a body (tag) background-image and then a main content background-color opacity attribute that can make my body background image viewable from behind the content div.

If WP does not do this then it is up to the users to hack up the CSS. WP has too many CSS "utensils" all over the admin. (CSS editing in the Customizer, CSS in the editors, CSS in the themes....) We don't need more choices for non-programmers. Just more utensils that work, for non-programmers.

@graemedgibson

This comment has been minimized.

Show comment
Hide comment
@graemedgibson

graemedgibson Feb 24, 2018

I just implemented BraadMartin's solution posted on Jun 13, 2015 above.

Fan-friggen-tastic! Thanks a bunch!

graemedgibson commented Feb 24, 2018

I just implemented BraadMartin's solution posted on Jun 13, 2015 above.

Fan-friggen-tastic! Thanks a bunch!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment