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?