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?

Geeks, making the world a better place
Quote · 8 Dec 2013

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?

Geeks, making the world a better place
Quote · 9 Dec 2013

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

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

Geeks, making the world a better place
Quote · 9 Dec 2013

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.

Geeks, making the world a better place
Quote · 10 Dec 2013

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?

Geeks, making the world a better place
Quote · 10 Dec 2013

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

Quote · 10 Dec 2013

 

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.

Geeks, making the world a better place
Quote · 10 Dec 2013

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. 

Geeks, making the world a better place
Quote · 11 Dec 2013

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/

Geeks, making the world a better place
Quote · 12 Dec 2013
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.