vBulletin LTS

Adding HTML5 color picker to your product settings

by Scanu 07 Aug 2012

Rating:

(4 votes - 4.00 average)

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

HTML 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

vblts.ru supports vBulletin®, 2022-2024