Spectrum is a Javascript plugin written by Brian Grinstead.

Download:

Spectrum can be downloaded for free from its GitHub page.

Installation:

Unzip Sepctrum and install it in the site/includes directory where you will have created two subdirectories "js" and "css". 
Place the file spectrum.js in the "js" directory and spectrum.css in the "css" directory.

Use:

  • In your form, where you want to present the colorpicker, create a text element. Give it a name and remember it.
  • Go to form Advance Options > More Options > Piece > Before form piece > Custom > and paste this in between :
    $this->execPieceByName('ff_InitLib'); // initialisation BreezingForms library
    echo '
    	<style>
    		.colorpicker {display: none !important;} // Contrer un affichage indésirable et inattendu du champ
    	</style>
    	<link rel="stylesheet" href="/includes/css/spectrum.css" />
    	<script type="text/javascript" src="/includes/js/spectrum.js"></script>
    ';

     

  • Now in the script tab > Initialization Script > Custom > Press "Create Code framework" and paste this in between :
    ff_getElementByName('fieldName').addClass('colorpicker').id = 'myID';
    	jQuery('#myID').spectrum({
    	   // Enter here the desired parameters, separated by a comma, to customize your colorpicker
    	   // for example:
    	   color: 'f00',
    	   showPalette: true,
    	   cancelText: 'Annuler', // Custom text for any language other than English
    	   chooseText: 'Valider', // Custom text for any language other than English
    	    palette:[ // Below the different pellets of the color palette, everything is customizable.
    			["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
    			["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
    			["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
    			["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
    			["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
    			["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
    			["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
    			["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
    		],
    	});
     

You can find all the options available on the plugin's documentation page with an overview of each one

A more complete tutorial (in French) with examples can be found on this page.

Writen from Eddy Van Hoeke (www.breezingforms.eddy-vh.com).

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!