Adding HTML5 color picker to your product settings

[Scanu]

Result
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_color

In this article i will explain how to put an HTML5 colorpicker to your product setting. Usually what you can do is making a normal input text field where admins can put hex colors you can then use $vbulletin->options['setting_name'] to get that hex value but if you're looking for something more beautiful and easy to use (fir admins) then do as described.

Create your setting

Varname: Your setting varname (to use it later on your mod)

Setting group: The group of settings where the setting is

Product: Your product name

Title: The title of your setting (e.g. Color of the background)

Description: The description of your setting (e.g. Choose a color fron the color picker)

Option code: In this case custom eval code

<input type='color' value='$setting[value]' name='setting[$setting[varname]]' id='sel_setting_$setting[varname]' >​

Remember that the value you insert will be used in a php string between two double-quotes so in your html tag you can use <font color=\" or <font color=', in this case i decide to use apostrophes.

Default: Your default value (e.g. #000000)

Data Validation type: Free

Validation PHP Code: Not useful now

[ChiNa]

Amazing Scanu, I cant like your post telling me that I must like anothers post befor Liking yours .. And I did like another one and came back.. Still the same.. Strange..

Well done

[abdobasha2004]

screen shots not working ! :erm::erm:

[Scanu]

Sorry moderators removed attachments (don't ask me why) :D
I'll upload new screenshots soon

[Dorgham]

Thanks :)
but screen shots not working :(

[Scanu]

Sorry again, i didn't find time to upload new screens. You can search on google for some image of the html 5 color picker (input type color).

[Dr.CustUmz]

are there any products anyone know of off hand that have this in them, i'd like to see how it's implemented

[Scanu]

<a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_color" target="_blank">http://www.w3schools.com/html/tryit....put_type_color</a>
This is how it will look, it doesn't work on all browsers, on old browsers you'll see a normal text field

[taravasya]

Scanu, thanks for sharing! What about multiple color pickers with separated values(such as a comma separated), but in one setting? Something like this:
https://vborg.vbsupport.ru/external/2016/08/11.jpg
At this moment, I add to Code Option next value:
<input type='color' value='$setting[value]' name='setting[$setting[varname]]' id='1sel_setting_$setting[varname]' >
<input type='color' value='$setting[value]' name='setting[$setting[varname]]' id='2sel_setting_$setting[varname]' >
<input type='color' value='$setting[value]' name='setting[$setting[varname]]' id='3sel_setting_$setting[varname]' >
I understand what wthis not correct. And I almost undersand wherefore after save settings, I have the same value for all three color pickers. As I understand for "Code Option" needed more tricky code, which would collect all the values separated by a comma, and in the cycle, based on the available number of values, would create the same number of color pickers. But I`m not very good understood how does work eval code in "Code Option" fields(((

--------------- Added 1470171077 at 1470171077 ---------------

Forget it...
I found this article:
https://vborg.vbsupport.ru/showthread.php?t=181044
and figure out how I can implement what I need.