Register Members List Search Today's Posts Mark Forums Read

Article Options
Using the 'Color Picker' inside the vBulletin Options/Settings Area
Join Date: Nov 2001
Posts: 108

by Shane Shane is offline 30 May 2008


This article is about how you use the color picker inside the vBulletin Option page. I been working on getting this working for the past 2 days and after some serious sit down, I was able to get it to work, and it works very well let me tell you! This is for 3.7.x series only. I haven't tested this on older versions.

Step 1

First thing is create your "Option". Data Validation Type MUST be free. Anything else would not work. Reason? (Assuming you everything else filled out) We will be added custom code, more importantly HTML mixed with eval code.

So. The example "Option Code" is this:

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

This is the basic of what you need. You can format the HTML anyway you want, but this is basic.

What's going on?

First we are adding the javascript file from clientscripts so we can use the color picker that the CSS editor users. The bottom part is needed to start the color picker. numColors is needed so the previewing colors works correctly when loading the values. In this case it's 0. 0 does equal 1.

Next we run some eval code. We need to generate the hidden color picker code that will be on the background. So we have to include the adminfunctions_template.php file to be able to do it. Put the code inside and variable and then output that variable so it "shows". Once you do these steps, you can now create your HTML.

HTML is anything you want...

But you need a input field (doesn't matter the type) and a div that has the colorpreview CSS tag. Without typing everything out notice how everything lines up with the 0:

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

Once you have all the number of field you want, and it works properly (minus saving data as we will get to that next) go ahead and save it. Notice that the variable that I give in the name field doesn't have to be the same as the variable you are using as you might have more than one custom eval code inside this option box. This is just for simplcy sake here.

Plugins Needed

Because we need to save this eval code, we need plugins to process the data because the options.php file can not process it. So we need custom code to help.

Hook: admin_options_processing (used when saving data.)

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

Because the nature of how "values" work we need to serialize the data inside the database. It takes each "item" from the array that we generated, and extracts the information and puts them into a serial value. This looks different depending on many values you have so there is no example. NOTE: It took me 2 hours to figure out that $settings has to be $settings. Do not change it to $setting! (Yeah.. I hate small mistakes.)

Hook: admin_options_print (Used when "reading")

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

This will take the unserialize information that we process from the value field, and put it in our variable that we have specified earlier.

That's it!

That's how you add the color picker to your plugin options. Granted there are limitations of more than one plugin will use the color picker because you have to keep the javascript variable "sane", but I am looking into making some changes in the "hard" code to send to vB dev team to implement the change to allow the color picker for two different forms if you were in the overall view. Having your plugin show up by itself in the options will work just fine as it will only load your plugin options and the form only once. So there are currently limitations, but this is how it's done for now!

Attached Images
File Type: jpg color_picker.jpg (32.1 KB, 278 views)

Last edited by Shane; 31 May 2008 at 05:06..
Views: 5022
Reply With Quote
Old 07 Jun 2008, 12:54
Preech Preech is offline
Join Date: Aug 2002
Very good Shane. This looks much better than the way I tried to implement this into vbulletin.
Reply With Quote
Old 19 Jun 2008, 04:52
Shane's Avatar
Shane Shane is offline
Join Date: Nov 2001
Real name: Shane
You should be able to transfer the same technique over to a publicly accessible page.
Battlestar Forum
Reply With Quote
Old 11 Jan 2010, 08:14
Mythotical Mythotical is offline
Join Date: Jun 2004
EDIT: Figured it out but can't figure out how to have more than one on a settings page.

Last edited by Mythotical; 13 Jan 2010 at 06:46.
Reply With Quote
Old 14 Mar 2010, 14:15
Gladhatter Gladhatter is offline
Join Date: Oct 2008
Location: Clintwood VA
Real name: Charlie Swindall
Was this matter worked on any more? Can some one update me on this. I am hoping to get a color picker issue resolved as well and this may be the key. Do any of you guys hire out in the work for pay section?


Visit the SBS to learn about traditional hat making skills and the finest pure sterling beaver custom handmade bespoke commissioned hats in the universe.
Reply With Quote
Old 17 Sep 2011, 23:20
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
Join Date: Jun 2008
Real name: Joe D.
Just want to confirm for everyone this still works on VB 4.x with one little change, not sure if it ever worked right n 3.x but you lose the preview color in the box in 4.x after saving. The value saves simply the preview color resets to black.

To fix this I edited the line in the option code:

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

I added the code in red:

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

Working great.
Former Moderator. Retired.

@BirdOPrey5 | All Things BOP5 | Joe's Ultimate Off Topic
Note - I no longer making new VB mods, sorry.
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:41.

Layout Options | Width: Wide Color: