This color picker tool for Joomla developers is designed to generate a color picker custom form field for use in Joomla extensions. It is compatible with Joomla 1.5, 1.6 and 1.7, with mootols 1.1, 1.2 and 1.3, , and does not require any other javascript library, so no conflicts with the Joomla admininstrator template. It is very lightweight, consisting of a single javascript file, plus the the Joomla element and formfield classes necessary to generate the custom parameter. It can be used in component, module or plugin parameters to generate a color picker from which the user can select a color.

The color picker modifies a standard Joomla parameter text field to generate a color picker. It returns a six-digit hexadecimal color code. It decays gracefully - if for any reason the script does not function then the user will see a standard text field. However is has been tested in Internet Explorer 7 and 8, plus Firefox, Google Chrome, Opera and Safari, and should work in any standards compliant browser.

You can see a basic example of what the form field looks like here.

We have included an example content plugin to show how it is used in  Joomla 1.5, 1.6 and 1.7. The plugin doesn't do anything, it just displays the color picker in the plugin parameters.

Usage - Joomla 1.5

To use the color picker in your Joomla 1.5 extension you need to copy the file elements/colorpicker.php to an elements folder in your extension. Then in your extension manifest xml file you will need to add an 'addpath' attribute to the <params> tag, eg:-

<params addpath="/plugins/content/elements">

Then you create a form element in the normal way, simply giving it the type 'colorpicker'.

<param name="field2" type="colorpicker"
description="Example color picker"
label="Example color picker"
/>

Usage Joomla 1.6 + 1.7

To use the color picker in your Joomla 1.5 extension you need to copy the file fields/colorpicker.php to an elements folder in your extension. Then in your extension manifest xml file you will need to add an 'addfieldpath' attribute to the <fields> tag, eg:-

<fields name="params" addfieldpath="/plugins/content/example_colorpicker/fields">

Then you create a form element in the normal way, simply giving it the type 'colorpicker'.

<field name="field2" type="colorpicker"
description="Example color picker"
label="Example color picker"
/>

Additonal Requirements

You will need to remember to load the elements and fields folders when your plugin is installed:-

<files>
<filename plugin="example_colorpicker">example_colorpicker.php</filename>
<filename>index.html</filename>
<folder>language</folder>
<folder>elements</folder>
<folder>fields</folder>
</files>

You will also need to ensure that the colorpicker script is loaded. You have a choice about this. By default the colorpicker script is assumed to be in the folder media/colorpicker/js - the media folder is the default folder for scripts in Joomla. To ensure that it is copied to there you must include the following in your manifest:-

<media destination="colorpicker/js" folder="">
<filename>color-picker.js</filename>
</media>

Alternatively it can be added to the same folder as the element and formfield scripts (you will need to add it to each folder if you are installing for Joomla 1.5 and 1.6+). Then use the scriptpath attibute on the <param> or <field> tag with a value of "self", eg:

<param name="field2" type="colorpicker"
description="Example color picker"
label="Example color picker"
scriptpath="self"
/>

You can also specify an actual path for the script if you prefer to put it somewhere else, make it relative to the root folder of the site:-

scriptpath="modules/my_module/colorpicker.js"

Other Options

The colorpicker also supports the following options, which can be set as attributes to the <param> or <field> tag: cellwidth, cellheight, top, left. These control the size and the positioning of the picker, for example:

<param name="field2" type="colorpicker"
description="Example color picker"
label="Example color picker"
cellwidth="5" cellheight="10" top="20" left="-30"
/>

Known Issues

You need to make sure that there is room for the color picker to be displayed in the module parameters. This is because of the accordion panel which is used in the Joomla admin template, which has a css overflow style set to 'hidden', if the color picker is outside the bounds of the panel it will not be visible. You can use the 'top' and 'left' options to adjust the positioning to help with this.

Licensing

The color picker is licensed under the GPL/GNU - see the license.txt included with the package. If you like this and include it in your etensions it would be nice to receive a link somewhere to our site http://www.spiralscripts.co.uk, but this is entirely voluntary of course.