How to use the color picker widget in Concrete CMS 5.7

Apr 1, 2015

The Concrete CMS 5.7 color picker widget uses the Spectrum color picker.
http://bgrins.github.io/spectrum/

Core::make('helper/form/color')
output( string $inputName, value $value = null, array $options = array() )

http://documentation.concrete5.org/api/class-Concrete.Core.Form.Service.Widget.Color.html

Default Options:

$defaults = array();
$defaults['value'] = $value;
$defaults['className'] = 'ccm-widget-colorpicker';
$defaults['showInitial'] = true;
// Show the color that was initially set when the color picker was opened next to the current selection.
$defaults['showInput'] = true;
// Type, copy, and paste into the color picker input text box.
$defaults['allowEmpty'] = true;
// Allow an empty value to be selected.
$defaults['cancelText'] = t('Cancel');
$defaults['chooseText'] = t('Choose');
$defaults['preferredFormat'] = 'rgb';
// The color format that is displayed in the text box and the format saved.
$defaults['clearText'] = t('Clear Color Selection');

http://documentation.concrete5.org/api/source-class-Concrete.Core.Form.Service.Widget.Color.html#8-44

More information on Spectrum color picker options.
http://bgrins.github.io/spectrum/#options

The color picker options are added to the output() method as a multidimensional associative array. The array is added as a third argument.
Example:

output('color_name', $color_name, array(…options…))

Basic Use:

$color = Core::make('helper/form/color');
$color->output('basic', $basic);

Start with a Default Color:

$color = Core::make('helper/form/color');
$color->output('defaultColor', $defaultColor ? $defaultColor : '#000000');

$defaultColor ? $defaultColor : '#000000'
A ternary operator is used in the second argument.
If $defaultColor is true, use the value of $defaultColor.
If $defaultColor is false, set the value to #000000.

Select a Preferred Color Format

$color = Core::make('helper/form/color');
$color->output('hex', $hex, array('preferredFormat' => 'hex'));

Format Options:
hex
array('preferredFormat' => 'hex')
hex3
array('preferredFormat' => 'hex3')
hsl
array('preferredFormat' => 'hsl')
Default when no format is specified:
rgb

RGB Color Format with Transparency Slider (RGBA)

$color = Core::make('helper/form/color');
$color->output('rgba', $rgba, array('showAlpha' => 'true'));

array('showAlpha' => 'true')

*** Palette colors can be HTML named colors, hex, hex3, rgba, rgba, hsl, and hsla.

Show a Color Palette

$color = Core::make('helper/form/color');
$color->output('showPalette', $showPalette, array('showPalette' => 'true', 'palette' => array(
    array('yellow', 'blue', 'red'),
    )));

array('showPalette' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))

Show a Color Palette with Custom Rows

$color = Core::make('helper/form/color');
$color->output('showPaletteRows', $showPaletteRows, array('showPalette' => 'true', 'palette' => array(
    // Row One - one color
    array('red'),
    // Row Two - two colors
    array('yellow', 'blue'),
    // Row Three - three colors
    array('orange', 'grey', 'aquamarine'),
    // Row Four - four colors
    array('#9113C6', 'rgba(95, 91, 0, 0.7)', 'rgba(58, 56, 0, 0.7)', 'lightblue'),
    )));

array('showPalette' => 'true', 'palette' => array(
array('palette_color_row1_1'),
array('palette_color_row2_1', 'palette_color_row2_2'),
array('palette_color_row3_1', 'palette_color_row3_2', 'palette_color_row3_3')
array('palette_color_row4_1', 'palette_color_row4_2', 'palette_color_row4_3', 'palette_color_row4_4')
))

The color palette can be divided into rows. Each sub-array of the palette array forms a new row. Each row can have differing numbers of colors.

Show a Color Palette in RGB Color Format with Transparency Slider (RGBA)

$color = Core::make('helper/form/color');
$color->output('showPaletteRGBA', $showPaletteRGBA, array('showAlpha' => 'true', 'showPalette' => 'true', 'palette' => array(
    // green
    array('rgba(0, 141, 6, 0.7)', 'rgba(0, 95, 4, 0.7)', 'rgba(0, 58, 3, 0.7)'),
    // lightblue
    array('rgba(0, 90, 141, 0.7)', 'rgba(0, 61, 95, 0.7)', 'rgba(0, 37, 58, 0.7)'),
    // blue
    array('rgba(0, 23, 142, 0.7)', 'rgba(0, 15, 95, 0.7)', 'rgba(0, 9, 58, 0.7)'),
    // purple
    array('rgba(61, 0, 142, 0.7)', 'rgba(41, 0, 95, 0.7)', 'rgba(25, 0, 58, 0.7)')
    )));

array('showAlpha' => 'true','showPalette' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))

Show Color Palette Only

$color = Core::make('helper/form/color');
$color->output('showPaletteOnly', $showPaletteOnly, array('showPalette' => 'true', 'showPaletteOnly' => 'true', 'palette' => array(
    // green
    array('rgba(0, 141, 6, 0.7)', 'rgba(0, 95, 4, 0.7)', 'rgba(0, 58, 3, 0.7)'),
    // lightblue
    array('rgba(0, 90, 141, 0.7)', 'rgba(0, 61, 95, 0.7)', 'rgba(0, 37, 58, 0.7)'),
    // blue
    array('rgba(0, 23, 142, 0.7)', 'rgba(0, 15, 95, 0.7)', 'rgba(0, 9, 58, 0.7)'),
    // purple
    array('rgba(61, 0, 142, 0.7)', 'rgba(41, 0, 95, 0.7)', 'rgba(25, 0, 58, 0.7)')
    )));

array(showPalette' => 'true', 'showPaletteOnly' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))
Restrict color choices to a predefined color palette.

in db.xml:

The color selected is a string and will need a field in the block table to be saved.

The type="C" field type to MySQL is VARCHAR. VARCHAR - variable characters with a 255 maximum http://www.concrete5.org/documentation/how-tos/creating-and-working-with-db-xml-files/

Recent Tutorials
Updating Concrete Themes from Version 8 to Version 9
Nov 24, 2022

This tutorial covers commonly encountered issues when upgrading a Concrete CMS theme from version 8 to version 9

Transferring ownership of an add-on and a theme
Nov 15, 2022
By katzueno.

If you encounter a Concrete CMS add-on or theme that you love but not being maintained, you may want to ask the author to help or take over the add-on or theme. Here is the quick step-by-step guide of how to transfer the ownership.

How to update Add-Ons if not on the Update Add-Ons Menu item
Jul 4, 2022

How to manually download an add-on and update it when your site's core versions isn't considered compatible with the add-on version.

Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Was this information useful?
Thank you for your feedback.