Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
Reload this Page Using the 'Color Picker' inside the vBulletin Options/Settings Area
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Using the 'Color Picker' inside the vBulletin Options/Settings Area
Shane's Avatar
Shane
Join Date: Nov 2001
Posts: 108

 

Show Printable Version Email this Page Subscription
Shane Shane is offline 05-29-2008, 10:00 PM
Intro

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:

HTML Code:
<script type=\"text/javascript\" src=\"../clientscript/vbulletin_cpcolorpicker.js\"></script>
" . eval('include_once("adminfunctions_template.php"); $colorhtml = construct_color_picker();') . $colorhtml . "
<div>
    <fieldset>
        <table width=\"100%\">
            <tr class=\"alt1\">
                <td>Your Color</td>
                <td>
                    <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">
                        <tr>
                            <td><input type=\"text\" class=\"bginput\" name=\"setting[MYVARNAME][color0]\" id=\"color_0\" value=\"$MYVARNAME[color0]\" tabindex=\"1\" size=\"22\" onchange=\"preview_color(0)\" />&nbsp;</td>
                            <td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\"></div></td>
                        </tr>
                    </table>
                </td>
            </tr>
            </tr>
        </table>
    </fieldset>
</div>
<script type=\"text/javascript\">
<!--
var numColors = 0;
var colorPickerWidth = 253;
var colorPickerType = 0;

init_color_preview();
// -->
</script>
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:

HTML Code:
<td><input type=\"text\" class=\"bginput\" name=\"setting[MYVARNAME][color0]\" id=\"color_0\" value=\"$MYVARNAME[color0]\" tabindex=\"1\" size=\"22\" onchange=\"preview_color(0)\" />&nbsp;</td>
<td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\"></div></td>
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.)

PHP Code:
if ($oldsetting['varname'] == 'MYVARNAME')
{
    $setvar =& $vbulletin->GPC['setting'];
    foreach($setvar['MYVARNAME'] AS $color => $value) {
        $larke[$color] = $value;
    }
    $settings["$oldsetting[varname]"] = serialize($larke);
} 
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")

PHP Code:
if ($setting['varname'] == 'MYVARNAME')
{
    $value = @unserialize($setting['value']);
    $MYVARNAME = array();
    foreach ($value AS $colornum => $value) {
        $MYVARNAME[$colornum] = $value;
    }
} 
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!

Enjoy!
Attached Images
File Type: jpg color_picker.jpg (32.1 KB, 0 views)
Reply With Quote
  #2  
Old 06-07-2008, 10:54 AM
Preech Preech is offline
 
Join Date: Aug 2002
Location: Fort Campbell
Posts: 325
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Very good Shane. This looks much better than the way I tried to implement this into vbulletin.
Reply With Quote
  #3  
Old 06-19-2008, 02:52 AM
Shane's Avatar
Shane Shane is offline
 
Join Date: Nov 2001
Posts: 108
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
You should be able to transfer the same technique over to a publicly accessible page.
Reply With Quote
  #4  
Old 01-11-2010, 06:14 AM
Mythotical Mythotical is offline
 
Join Date: Jun 2004
Location: Booneville, AR, USA
Posts: 1,428
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
EDIT: Figured it out but can't figure out how to have more than one on a settings page.
Reply With Quote
  #5  
Old 03-14-2010, 12:15 PM
Gladhatter Gladhatter is offline
 
Join Date: Oct 2008
Location: Clintwood VA
Posts: 193
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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?

Thanks

Charlie
Reply With Quote
  #6  
Old 09-17-2011, 09:20 PM
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
Senior Member
  
Join Date: Jun 2008
Location: New York
Posts: 10,610
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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:

Code:
<td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\"></div></td>
I added the code in red:
Code:
<td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\" style=\"background-color:$MYVARNAME[color0];\"></div></td>
Working great. :up:
Reply With Quote
Reply

« Previous Thread | Next Thread »

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
Forum Jump


All times are GMT. The time now is 08:33 AM.

Contact Us - Archive - Top

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.04074 seconds
  • Memory Usage 2,284KB
  • Queries Executed 20 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (2)bbcode_code
  • (2)bbcode_html
  • (2)bbcode_php
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (6)post_thanks_box
  • (6)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (6)post_thanks_postbit_info
  • (5)postbit
  • (1)postbit_attachment
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete