Replace the Colour Picker

The colour picker in the Profile Customiser needs to be upgraded; for one, it does not support transparency and many members don't know how to enter rgba codes in the colour field.  Has anyone upgraded the colour picker with a better one that includes transparency?

No wonder it looks so outdated, it is outdated.  I took a look:

/*
Color Input for jQuery
Copyright (c) 2008 Anthony Johnston
http://www.antix.co.uk
http://code.google.com/p/jquery-colorinput/
       
version 0.9.6
*/

I wonder if Anthony gets a cut of the license fee?

I like this one; I will probably work to include this one in place of the default colour picker.

http://www.digitalmagicpro.com/jPicker/

I managed to get jpicker installed and working except for the transparency bit.  I am unsure why.  The instructions are by example only so if someone wants to visit http://www.digitalmagicpro.com/jPicker/ and take a look please go ahead.

I dropped the other one because of the problem with the alpha channel.  Perhaps I did not install it correctly.  I installed this colour picker instead: http://martijn.vanderlee.com/?page_id=314 and have it working although it is a long number on the alpha part which I have asked the developer about; seems to be not rounding off the number when it generates the alpha bit.  It works though.

This time I uploaded the entire colour pick script into a separate directory under the profile_customize directory.  I then added the scripts in the customize_block.html template of the profile customiser like so:

<script src="<bx_url_root />modules/boonex/profile_customize/colorpicker/jquery.colorpicker.js"></script>
<link href="<bx_url_root />modules/boonex/profile_customize/colorpicker/jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
<script src="<bx_url_root />modules/boonex/profile_customize/colorpicker/swatches/jquery.ui.colorpicker-pantone.js"></script>
<script src="<bx_url_root />modules/boonex/profile_customize/colorpicker/parts/jquery.ui.colorpicker-rgbslider.js"></script>
<script src="<bx_url_root />modules/boonex/profile_customize/colorpicker/parts/jquery.ui.colorpicker-memory.js"></script>
<script src="<bx_url_root />modules/boonex/profile_customize/colorpicker/parsers/jquery.ui.colorpicker-cmyk-parser.js"></script>
<script src="<bx_url_root />modules/boonex/profile_customize/colorpicker/parsers/jquery.ui.colorpicker-cmyk-percentage-parser.js"></script>

<script type="text/javascript">
    oCustomizer = new BxProfileCustimizer();
   
    oCustomizer.sReset = '<bx_text:_bx_profile_customize_js_reset />';
    oCustomizer.sErrThemeName = '<bx_text:_bx_profile_customize_js_err_theme_name />';
    oCustomizer.sErrChooseTheme = '<bx_text:_bx_profile_customize_js_err_choose_theme />';
    oCustomizer.sDeleteTheme = '<bx_text:_bx_profile_customize_js_delete_theme />';
    oCustomizer.sResetPage = '<bx_text:_bx_profile_customize_js_reset_page />';
</script>

<script type="text/javascript">
    $(function() {
        $('input[name=color]').colorpicker({
            parts: 'full',
            showOn: 'both',
            buttonColorize: true,
            showNoneButton: true,
            buttonText: '[+]',
            alpha: true,
            colorFormat: 'RGBA'
        });
    });
</script>
<div id="__name_id__" class="bx-def-margin-top">
    __box_content__
</div>

If that is not such a good way, then how would others do it?  I was thinking the customize_block.html would only load in if I hit the customise button and thus not always be added to the page.  Am I correct in that thinking?

Is there a module that could change colours for the site template?  Fonts, backgrounds etc...?

They are adding a site_customiser to 7.1.x but it works only if you use the UNI or ALT templates.  There are no modules that will allow one to edit the template files through the backend; the template files would need to have the permission set to allow it and that could mean someone could hack and trash your site's template.

I think I will move the colour picker to the plugins directory and load in the scripts to the head; why not, there are already a lot of scripts loading in.  The reason is to see if I can get the customiser colour picker to load faster, there is a noticeable lag in opening the customiser and seeing the colour picker box appear. 

OK, I think I have this working nicely now.  I will link to the github of the colour picker and then show which files to edit to use this colour picker.  There is a demo page up of the colour picker so you can see all the different options and settings.

http://vanderlee.github.io/colorpicker/