Register Members List Search Today's Posts Mark Forums Read

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

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

Result
http://www.w3schools.com/html/tryit....put_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

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: 6210
Reply With Quote
Comments
  #2  
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 vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #3  
Old 19 Sep 2012, 23:53
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
screen shots not working !
Reply With Quote
  #4  
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
  #5  
Old 29 Oct 2012, 23:55
Dorgham's Avatar
Dorgham Dorgham is offline
 
Join Date: May 2012
Thanks
but screen shots not working
__________________
AdSense revenue sharing 100% - [ Hanan ]
News, egypt : أخبار مصر - Photo, picture : صور
Reply With Quote
  #6  
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
  #7  
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
__________________
Sorry been away so long, new baby, got married, got into GM, just got to the point I can resume developing.
I'm working on a bunch of products, some free, some paid, and will release them all at once.
Dirt RIF CustUmz
Reply With Quote
  #8  
Old 26 Jul 2014, 10:30
Scanu's Avatar
Scanu Scanu is offline
 
Join Date: Nov 2010
http://www.w3schools.com/html/tryit....put_type_color
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
  #9  
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:
http://www.vbulletin.org/forum/showthread.php?t=181044
and figure out how I can implement what I need.

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



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 22:57.

Layout Options | Width: Wide Color: