Replacing the Colour Picker on Profile Customiser

First step is to go to https://github.com/vanderlee/colorpicker and download the zip.  Extract the zip.  I renamed the folder to just colorpicker; you keep the original name and make the necessary corrections in the following instructions.

Upload the colorpicker folder to your /plugins directory on the server.

Navigate to the profile-customizer module to /modules/boonex/profile-customizer/templates/ and edit the customize_block.html file and after the first script block add the following:

<script type="text/javascript">

$(function() {

$('input[name=color]').colorpicker({

parts: 'full',

showOn: 'button',

buttonColorize: true,

showNoneButton: true,

buttonImage: '<bx_url_root />plugins/colorpicker/images/ui-colorpicker.png',

buttonImageOnly: true,

alpha: true,

colorFormat: 'RGBA'

});

});

</script>

There are many options to customise the colour picker and I will leave it for you to read and determine how you wish it to be; the above is what I decided on.

Now navigate to /modules/boonex/profile-customizer/classes and edit the BxProfileCustomizeTemplate.php file; find the following code around line 164:

        $this->addCss(array('main.css'));

        $this->addJs(array('colorinput.js', 'main.js'));:

change the second line to this:

        $this->addJs(array('main.js'));

You will now need to edit the _header.html file in your template folder if your template has the header file include and this will need to be added to any template that is using its own _header.html file.  There are other ways to load the javascript files but the _header.html is one of the easiest ways.  If you have a lot of templates, then you might want to choose another way that will load them without having to change each template's _header.html file.

Add the following lines to the _header.html file somewhere in the <head> section:

<script src="<bx_url_root />plugins/colorpicker/jquery.colorpicker.js"></script>

<link href="<bx_url_root />plugins/colorpicker/jquery.colorpicker.css" rel="stylesheet" type="text/css"/>

<script src="<bx_url_root />plugins/colorpicker/swatches/jquery.ui.colorpicker-pantone.js"></script>

<script src="<bx_url_root />plugins/colorpicker/parts/jquery.ui.colorpicker-rgbslider.js"></script>

<script src="<bx_url_root />plugins/colorpicker/parts/jquery.ui.colorpicker-memory.js"></script>

<script src="<bx_url_root />plugins/colorpicker/parsers/jquery.ui.colorpicker-cmyk-parser.js"></script>

<script src="<bx_url_root />plugins/colorpicker/parsers/jquery.ui.colorpicker-cmyk-percentage-parser.js"></script>

Note that I use <bx_url_root/> to automatically pick up the site's URL root; this will work for your site as well without needing to edit the code, just cut and paste.
 
Be sure to back up your files first; don't just change and overwrite, back up always.
 
When you are finished, the colour picker will now appear as such:
 
 
 

 

colour picker.png · 107.9K · 823 views
Geeks, making the world a better place
Quote · 12 Dec 2013

Please note that if you are using AntonLV's Profile Composer Module and have not updated to the latest version, please do so as there is a jquery conflict otherwise.

Also, on my site I had to go into the colour picker css and add a background to the colour picker table; it was transparent on my site and looked horrible.

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

Nice share.....Thanks GG

Would be a smart move for Boonex to implement this too.

Quote · 12 Dec 2013

In order for the colour picker to work, you also have to load in the jquery ui library.  In order to avoid potential conflicts of loading it twice, load it only on the pages you need it.  For the profile customizer you can load it on the profile page by adding the following to page_5.html.

 

<script language="javascript" type="text/javascript" src="<bx_url_root />plugins/jquery/jquery.ui.all.min.js"></script>

 

If you are using AntonLV's Profile Composer module, then you need to comment out where he is loading the ui library.

In AqbPCBuilder.php find around line 56;

$this -> _oMain -> _oTemplate -> addJs(array('jquery.ui.all.min.js'));

and comment it out by add double slashes (//) to the beginning of the line:

// $this -> _oMain -> _oTemplate -> addJs(array('jquery.ui.all.min.js'));

 

This is necessary because the PC module loads in the ui library on the members pages that are allow the composer but not on the pages that don't allow it.  Therefore you have to prevent the double loading of the ui library for profile composer members.

Geeks, making the world a better place
Quote · 19 Apr 2014
 
 
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.