Working with colours
An essential aspect of your design is Colour. Style Kits provide an intuitive method for managing color, through the controls located at the Global Colors tab in the Style Kits panel.
Any color that has been manually added on individual elements/widgets, will always override the Style Kit Global Color values. For the Global Colors to work, make sure that the elements are free of manually added styles.
The Global Colors Panel
Currently, in the Global colors you will find the following controls:
Controlling Accents and texts
The three first controls affect the Accent and Typography colors, throughout your template(s).
This is the color that will apply on your links. Make sure it is consistent with your brand, and has the proper contract in color.
The secondary accent color will apply on your buttons, and will replace their default color. You can customize further the color of each individual button size, through the Buttons Tab. Search this knowledge base for editing Buttons for more details.
Text and Headings Color
This is essentially the color that applies on the main text and the headings / titles.
Using Dynamic Background colors
The next group of controls offers the possibility to apply dynamic background colors to any section or column. For example, in your layouts, you might have certain sections that use a light or a dark background-color, and you want this to be consistent to all the layouts. Even better, you can control these colors dynamically from the style kits panel, by applying intuitive classes on the Sections you want. This way, if you want at some point to change the color of your light or dark background color globally, you dont need to browse through your pages and copy / paste styles among your sections.
Let's see how this works.
You can define a color for sections with a light background color. For example, if your body background color is white, you might want some of your sections in the layout to be differentiated by a light, background color.
You can apply this color to any section or column via the class:
Remember to add the class without the dot, so it's simply
sk-light-bg instead of
Any text elements inside a section with the light background class will inherit the color that you have defined for Typography and Headings.
Apart from sections with light background color, you almost definitely use sections that have a dark background color. In the same logic, the Dark background color option allows you to add color to such sections, with consistency and dynamic site-wide control.
In order to apply this color to a column or section, you just need to apply the class:
Text over Dark background
In the context of a section with a dark background, you will most likely need to define a color for the text that appears over it, because normally it will not be the default text color you are using. The Text over Dark background control does just that. It allows you to set a color that will be applied by default to any Typographic element that is nested in a section with the
sk-dark-bg class applied on it.