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>
