vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)
-   -   Adding HTML5 color picker to your product settings (https://vborg.vbsupport.ru/showthread.php?t=286422)

Scanu 08-06-2012 10:00 PM

Adding HTML5 color picker to your product settings
 
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
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

ChiNa 08-30-2012 05:14 PM

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 09-19-2012 10:53 PM

screen shots not working ! :erm::erm:

Scanu 09-20-2012 05:55 PM

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

Dorgham 10-29-2012 11:55 PM

Thanks :)
but screen shots not working :(

Scanu 10-30-2012 08:54 AM

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 05-07-2014 11:10 PM

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

Scanu 07-26-2014 09:30 AM

<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 08-02-2016 04:42 PM

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:
Code:

<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 [DATE]1470171077[/DATE] at [TIME]1470171077[/TIME] ---------------

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


All times are GMT. The time now is 10:48 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01161 seconds
  • Memory Usage 1,730KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (1)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (9)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete