Adding a colour picker to page layout settings

May 12, 2014 9:55 am

When creating page settings, sometimes you want to give users the option to change colours on the site. When creating settings you can create a setting that drops down a colour picker when clicked, allowing users to choose a colour without knowing the Hex value. Use the following steps to achieve this:

1. Download JSColour and upload all the included files to your graphics folder.
2. Include JSColour in the javascript settings option at the bottom of your page layout.
3. When adding a setting, choose a text setting and give it the class 'color' This will allow JSColor to initialize on the setting field.

4. User your setting as you would a hex code:

<body style='background-color: [[setting.my_color_setting]]'>

Note: If your color settings are not being prefixed with the hash symbol you can edit jscolor.js and change the setting this.hash = false; to true.