Change Color Picker to rgba

[SeanBlakeley]

I'm loving working with Redux - just scrapped 6 months of work in favour of this as a theme framework. Thanks very much :)

But I'm looking to create rgba colors rather than HEX. I've had a dig around and it looks like Redux is using the default Wordpress color picker? I assume there's no easy way to switch to rgba without hacking the code for a new color picker?

Cheers,

Sean

[evertiro]

Messages like this make my day! I'm glad you like the work I've been doing on Redux. Please open an issue on Github and I'll look into finding an rgba-friendly option for you :)

On 02/25/2013 03:19 PM, Seancito wrote:

I'm loving working with Redux - just scrapped 6 months of work in favour of this as a theme framework. Thanks very much :)

But I'm looking to create rgba colors rather than HEX. I've had a dig around and it looks like Redux is using the default Wordpress color picker? I assume there's no easy way to switch to rgba without hacking the code for a new color picker?

Cheers,

Sean

— Reply to this email directly or view it on GitHub https://github.com/ghost1227/Redux-Framework/issues/89.

[SeanBlakeley]

Delighted to make you day! I appreciate all your work. Unless I'm missing something this should now be an issue on Github.

Before Redux I didn't even know WP had a default colorpicker but I've been taking a look and it seems to be limited to hex colors. I can't find a rgba output in the docs http://automattic.github.com/Iris/

Maybe an issue for the WP core?

Cheers, Sean.

[evertiro]

It not being there doesn't mean I can't find a way to make it work :) However, I believe it should also be submitted to core. And yes, I saw the issue show up.

On 02/25/2013 04:37 PM, Seancito wrote:

Delighted to make you day! I appreciate all your work. Unless I'm missing something this should now be an issue on Github.

Before Redux I didn't even know WP had a default colorpicker but I've been taking a look and it seems to be limited to hex colors. I can't find a rgba output in the docs http://automattic.github.com/Iris/

Maybe an issue for the WP core?

Cheers, Sean.

— Reply to this email directly or view it on GitHub https://github.com/ghost1227/Redux-Framework/issues/89#issuecomment-14080664.

[djevrek]

Wordpress is already doing it in RGBA, but now showing that (image1), but you can use this js hack and make it available in RGBA too http://jsfiddle.net/ekinertac/3Evx5/1/

Image 1:

[djevrek]

Ok, just figured out how easy is to do this. http://jsfiddle.net/djevrek/29dTg/

So, just append new option for color picker so user can choose which format wants to shows to him. If he choose RGB, then append new input and use code from above link to copy background-color from A element to that new input.

Also, i find out bug http://core.trac.wordpress.org/ticket/21206 for this, so maybe we can tell guys overthere to include rgb(a) in next version so you dont need to do anything here.

[Jawaracing]

Hey guys, so have anyone figured it out how to get RGBA color picker?

[SeanBlakeley]

Hi Jawaracing,

I abandoned the built-in WP colorpicker in the end, in favor of a Bootstrap color picker:

http://www.eyecon.ro/bootstrap-colorpicker/.

Fairly easy to implement - rewrote the color field code and added the colorpicker css. The colorpicker doesn't need Bootstrap, just the .dropdown-menu css.

Works like a charm :)

Regards,

Sean.

[Jawaracing]

Hi,

thanks for your help.

For the last 3 hours I've been trying to implement this, but i just cant :/.

Could you help me, how did you exactly implemented this???

[SeanBlakeley]

Hi Jawaracing,

I'll try and implement a fork example for you :)

Sean.

[Jawaracing]

I would be very grateful if you would :).

Regards, JR

[evertiro]

What does everyone think about making this the default color picker for Redux? Possibly with an option to specify output type (RGB vs hex)? I took a look at it, and its definitely a step above the built-in color picker...

[bluehiveinteractive]

I think its a great idea! I like the ability to be able to switch between hex and RGB!

[psaikali]

Agreed, I often use a text field "opacity" that refers to a color field, would be cool to have one field to get a rgba() value. A simple PHP calculation could generate a "fallback" HEX color for older browsers.

2013/3/14 bluehiveinteractive notifications@github.com

I think its a great idea! I like the ability to be able to switch between hex and RGB!

— Reply to this email directly or view it on GitHubhttps://github.com/ghost1227/Redux-Framework/issues/89#issuecomment-14937966 .

Pierre Saïkali psaikali@gmail.com

[SeanBlakeley]

Agreed, I've found it works very well with Redux. I haven't got around to is writing a validation or fallback yet. Implementation was fairly easy - it's not dependant on any Bootstrap code except the dropdown-menu css (for the color box to appear).

Regards,

Sean.

[Jawaracing]

Hey Sean,

I've tried everything I can think of, but still nothing :(

In field_color.php under render function I tried like this http://prntscr.com/wdq9r

And then I enqueued styles and scripts like this http://prntscr.com/wdqak with asd.js being http://prntscr.com/wdqfb

And I can see in Chrome Developer tools that everything loads, but nothing happens when I click on field in options panel :/.

[SeanBlakeley]

Hey Jawaracing,

Let me try and make a example for you :) ...

Regards,

Sean

[SeanBlakeley]

I've Created a fork which implements an RGBA Colorpicker. Color lacks validation and non-rbga fallback for older browsers at the moment.

https://github.com/Themeic/Redux-Framework

Kind regards,

Sean.

[Jawaracing]

Thank you very much Sir, works great! :+1:

[ghost]

I am wondering what you mean by making 'this' the default color picker. Are you referring to the bootstrap color picker? If so, I would just like to add why change? What would be the benefit? The new Wordpress color picker looks pretty interesting: http://automattic.github.io/Iris/

What's more, when I went to the bootstrap colorpicker site, the color picker didn't even work properly. And finally, if we are going to consider a new default color picker, I think there are some other options to also consider - like these:

• Spectrum: http://bgrins.github.io/spectrum/
• HSLPicker: http://hslpicker.com/ (see also here: https://github.com/imathis/hsl-picker/)

I for one would like to see what the new Wordpress color picker can do first before changing to something else.

Just my two cents worth :)

[SeanBlakeley]

Hi MosheBP,

You're absolutely right - checking back at http://www.eyecon.ro/bootstrap-colorpicker/, the current example is not working for me in Firefox 20.0.1. Frustratingly, the contact details also don't seem to work.

I wanted rgba opacity control for a specific project and whilst the new WP color picker works with rgba (According to Matt Wiebe - https://github.com/Automattic/Iris/issues/13), it currently lacks a UI for selecting the opacity.

I opted for the Bootstrap color picker because of its simplicity and clarity - but sticking with the WP color picker may be better as the default option.

Regards,

Sean.

[evertiro]

@MosheBP Yes, I meant the bootstrap colorpicker. Their demo does seem to be acting up at the moment, but it's definitely better than Iris. There's a few minor issues with using Iris, including the lack of alpha support. I've seen Spectrum before, and don't particularly care for it... HSL does look interesting though. It bears checking into.

@Themeic I'm a bit torn on this. While using defaults where possible is always a good practice, I'm also trying to improve on them in this instance.

[ghost]

Besides lack of alpha support, what are the issues with Iris?

In terms of HSL - I'm a big fan of it. I personally would love to see that at least as an option.

[dovy]

We will probably end up rolling our own variation of the WP color picker and the user can define what type of output they want. Not sure about when, but it will eventually happen.

If you find a more elegant solution I'd love to see it. I'm not happy with any other pickers I have seen out there really. All the good ones are hex based.

[dovy]

Closed. Saved as a feature request in new repo.