Color Manager

In this article, we're going to discuss the Color Manager and how to use it when building or managing your site.

  1. What is the Color Manager
  2. When to Use the Color Manager
  3. How to Access the Color Manager
  4. How to Create the Global Colors
  5. How to Use Global Colors
  6. The EyeDropper
  7. How to Use Global Colors via Dynamic Content
  8. Adding Global Colors Programmatically
  9. Summary

What is the Color Manager

The Color Manager allows you to set a color palette for use on your site. Meaning you can switch one of the colors and it'll instantly update sitewide, saving you time on going back and forth editing individual color values.

When to Use the Color Manager

The Color Manager serves as an abstraction layer for easily assigning and updating colors throughout Cornerstone. For example, say you have some pages you've designed and they're using a select grouping of specific colors. Maybe you have dozens or even hundreds of instances of these colors across your site from borders to backgrounds to text to box shadows. Now let's say that down the road you decide that one of those colors used throughout those hundreds of instances needs to be updated. Without the Color Manager, you would need to revisit every element and update that by one...hundreds of times over. With the Color Manager, you can instead label a color however you see fit (e.g. "Primary Brand Color") and assign that labeled color. If you ever have to go back and update that color, you can simply update it once in the Color Manager and it will change all assignments of that color throughout your website.

How to Access the Color Manager

  1. Go to X / Pro in the WordPress admin Dashboard and click on Cornerstone.
  2. Click on the Layers icon to access the Theme options.
  3. Select Colors from the control tabs.
Color Manager

How to Create the Global Colors

Once you have opened the Color Manager, click the + button in the upper-right corner to add your first color:

Color Manager

Clicking on the + button will add a new color to your color palette. By default, these colors are named with an incrementing label (e.g. Color 1, Color 2, et cetera) and will be given a random value:

Color Manager

Clicking on the color will reveal its color picker, where you can update the color's name using the input at the top, duplicate the color, delete the color, and alter the color value to your desired output:

Color Manager

For instance, let's say that we want this color to be used as a sitewide accent color. You could update the color to your desired value and adjust the label accordingly:

Color Manager

Once adjusted, your color palette item will reflect the new color in the manager. Hovering over this item will reveal its label so you can remember what it is:

Color Manager

How to Use Global Colors

Now that you have created some colors in the Color Manager, they will be available throughout different settings of the theme and in Cornerstone. You can use the added colors whenever there is an color picker in the builders or theme options. The ordering of your available colors will match the order you have set in the Color Manager. Additionally, hovering over your palette items here will also reveal a tooltip showing the label of that color to help you remember what it is intended for:

Color Manager

The beauty of the Color Manager is that as long as you use these global assignments wherever appropriate, if you ever want to go back and make adjustments to your site's colors (such as change a primary brand color, accent, text, et cetera), you can update it in one spot in the Color Manager and it will be automatically reflected across your entire website! This is an incredibly powerful tool that should certainly be taken advantage of for large builds, and even smaller sites alike.

Imagine if you had a long landing page full of Elements. It's easy to imagine that you might be calling up the same colors over and over again across your design...probably hundreds of times. Using the Color Manager ensures that you don't have to remember those colors all the time, you can just select them from your palette, and if you ever need to make a change you can do so easily and save yourself tons of time!

The EyeDropper

Currently (April 24th 2023) only available in newer Webkit Browsers is the ability to select a color directly on the page. Your site will also need to be on HTTPS. When it is accessible it will show up as an eyedropper icon next to the color input.

Eyedropper Button

How to Use Global Colors via Dynamic Content

Global Colors are accessed via the id parameter to the global:color field. It would look something like this. To reference the IDs currently you need to access the "colors" in Dev Tools > Tools.

{{dc:global:color id="YOUR_ID"}}

Adding Global Colors Programmatically

There are two options here.

The first being to use "Theme" colors, which is currently accessible via the filter cs_colors_extend. This means in the UI you won't be able to change these color values which could be your preferences. You could for example, control your theme colors by environment variables.

<?php add_filter("cs_colors_extend", function() { return [ [ "title" => __("Accent"), "value" => "rgb(255, 0, 0)", "_id" => "accent", ] ]; });

In the UI it would similar to this.

Color Manager

The second option being to change the "Palette" colors, which is an entry in wp_options. This option_value is cornerstone_color_items and is expecting a json_encoded string that has been passed to wp_slash. In this example we will set initial colors if your color palette is empty.

// Check if not empty don't overwrite if (!empty(get_option('cornerstone_color_items', null))) { return; } // Your initial colors $initialColors = [ [ "title" => __("Accent"), "value" => "rgb(255, 255, 0)", "_id" => "accent2", ], ]; // Encode $stored = wp_slash( json_encode( $initialColors ) ); // Update update_option( 'cornerstone_color_items', $stored );


We've talked about the Color Manager feature and why it is recommended to use for small or big projects. Additionally we've explained how to access the Color Manager and add the global colors. Finally, we've discussed the usage of those colors throughout Cornerstone.

See something inaccurate? Let us know