The Total Theme includes a Color Palette functionality to make it easier to define a set color scheme so you can easily control your site colors globally.
To define your color palette, simply go to Theme Panel > Color Palette which will look something like this:
Click on the “Add Color” button on the top (just like adding posts) to add a new color to your palette.
Now that you’ve added your colors to the Color Palette panel you can use them in any theme element and in the Customizer.
Using Color Palette Colors in the Customizer
You can easily access your color palette colors in the WordPress customizer so that they can be assigned to various elements. Below is a screenshot showing the Color Palette picker window open in the customizer.
To access your color palette, click on the little globe icon in any theme’s color picker.
Using Color Palette Colors in Elements
Below is a screenshot showing the theme’s color picker in action in the WPBakery page builder. Simply click on the global to access your color palette colors.
Currently, it’s not possible to select your color palette colors in WPBakery (waiting on a fix on their end) but you can easily use your colors via the utility classes.
Simply go to the Color Palette panel and you can click on the background class which you can then insert into your row’s Extra classname field.
Helper Developer Classes & Gutenberg Support
The theme provides automatic support for Gutenberg for your custom colors via helper classes which you can also make use of in any development. So every color you define 2 classnames on the front-end that can be used for adding the color as a background or text color:
- has-{slug}-color
- has-{slug}-background-color
Where the {slug} is the slug as shown on the main Color Palette admin page. So if you look up at the first screenshot on the page the classes would be “has-palette-88-color” and “has-palette-88-background-color”.
You can also find these classes in your site header when inspecting via the source code.
Palette CSS Variables
The theme also registers each of your colors as a a CSS variable that can be used in any custom CSS. The CSS variables use the following format:
- –wpex-{slug}-color
So let’s say if you are writing some custom CSS and want to apply one of your colors as a background to your element you could do so like so:
.element {
background-color: var(--wpex-palette-14104-color);
}
Where “palette-14104” is your color slug.