Register Members List Search Today's Posts Mark Forums Read

Article Options
Adding HTML5 color picker to your product settings
Join Date: Nov 2010
Posts: 829

by Scanu Scanu is offline 07 Aug 2012
Rating: (4 votes - 4.00 average)


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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Last edited by Scanu; 26 Jul 2014 at 10:35..
Views: 6552
Reply With Quote
Old 30 Aug 2012, 18:14
ChiNa ChiNa is offline
Join Date: Jul 2012
Real name: CM
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
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on Its great to see new and old developers keeping alive! Thank you all for your support!CM
Reply With Quote
Old 19 Sep 2012, 23:53
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
Join Date: Aug 2008
screen shots not working !
Reply With Quote
Old 20 Sep 2012, 18:55
Scanu's Avatar
Scanu Scanu is offline
Join Date: Nov 2010
Sorry moderators removed attachments (don't ask me why)
I'll upload new screenshots soon
Reply With Quote
Old 29 Oct 2012, 23:55
Dorgham's Avatar
Dorgham Dorgham is offline
Join Date: May 2012
but screen shots not working
AdSense revenue sharing 100% - [ Hanan ]
News, egypt : أخبار مصر - Photo, picture : صور
Reply With Quote
Old 30 Oct 2012, 08:54
Scanu's Avatar
Scanu Scanu is offline
Join Date: Nov 2010
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).
Reply With Quote
Old 08 May 2014, 00:10
Dr.CustUmz's Avatar
Dr.CustUmz Dr.CustUmz is offline
Join Date: Aug 2013
Real name: Ryan
are there any products anyone know of off hand that have this in them, i'd like to see how it's implemented
If you need custom work done please use Dirt RIF CustUmz
Owner of vBTeam
vBulletin 3.8.14 DRC Edition PHP 7.4 Compatible- NOT a null, NOT complete files Requires a legit copy of vBulletin 3.8.11.
Reply With Quote
Old 26 Jul 2014, 10:30
Scanu's Avatar
Scanu Scanu is offline
Join Date: Nov 2010
This is how it will look, it doesn't work on all browsers, on old browsers you'll see a normal text field
Reply With Quote
Old 02 Aug 2016, 18:42
taravasya taravasya is offline
Join Date: Apr 2011
Scanu, thanks for sharing! What about multiple color pickers with separated values(such as a comma separated), but in one setting? Something like this:

At this moment, I add to Code Option next value:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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 02 Aug 2016 at 20:51 ---------------

Forget it...
I found this article:
and figure out how I can implement what I need.

Last edited by taravasya; 02 Aug 2016 at 18:51.
Reply With Quote

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

New To Site? Need Help?

All times are GMT. The time now is 15:40.

Layout Options | Width: Wide Color: