Color Field

Options#

• Preferred color format - The format you would like the color selected to adhere to if possible.
  • hex
  • hex3 (3 characters if possible)
  • hsl
  • rgb
  • name (falls back to hex)
  • none (depends on input)
• Allow alpha transparency - Whether to allow transparency to be applied to the color when being selected. If allowed color will most likely be stored as rgb.
• Has default color - The color the field has when first used by a new entry.
• Uses color palette - Allow colors to be selected from a palette of predefined colors.
  • Only allow colors from the palette to be selected.
  • First color in palette is selected by default.
  • The palette - Add and sort colors in the palette.
  • Import a predefined color palette - Import a color palette that is stored in enact/config/color-palettes.php to the current palette.

Predefined themes can be defined in enact/config/color-palettes.php, an example color-palettes.php could look like this:

<?php

return Array(

'Default Theme' => Array('#225378', '#1695A3', '|', '#ACF0F2', '#F3FFE2', '|', '#EB7F00'),

'Black And White with Transparency' => Array('rgba(0,0,0,.5)', 'rgba(250,250,250,.5)'),

);

Colors can be defined as hex, rgb, rgba, hsg, or even text. A bar | represents a line break.

Use#

If the field has been set to required then the entry will not be update-able until a color has been selected. Setting a default color is considered a selection and an error will not be shown in that instance.

Template Use#

Access your color fields via the handle you set for the field.

<div style='background-color: {{ entry.yourFieldHandle }}'>Nice background color!</div>

Test if the value was set

{% if entry.yourFieldHandle %}

    <p>Color was set and it was {{ entry.yourFieldHandle }}</p>

{% else %}

    <p>Color was not set!</p>

{% endif %}