Modifying Color Picker Options

by Chris Ullyott | Last edited: 5/25/2016

The color selections in the Color Picker tool is powered by a single CSS file.
Each color option is defined with a "variable" that exists inside comments in the CSS code.

To modify the options, follow these steps:

1. Find and edit the file "override.css", most often found in "_assets/css/".

2. Check the top of the override file. At the top of the file, all color options are defined, one per line:

/* $<VARIABLE NAME>, <TYPE>, <LABEL NAME> */

3. To add a new color, make a new line there. Here's an example:

/* $accent4, color, Footer Links 2 */

4. Define the CSS selectors for which this color is applied in a new block of CSS code. Inside the curly braces of this block, add the color's VARIABLE NAME before any rules:

#footer-links,
#footer-links a {
/* $accent4 */
color: #ffffff;
}

5. Save the "override.css" file and test your changes on the site.