Step 1
Login to the CMS.
Step 2
Go to any page in the tree menu. For example, click on the 'Home' page.
Step 3
In the bottom right, click 'Save and Preview'. Preview mode will now load in a new tab or window.
Step 4
On the right-hand side, you will see two buttons. One with a Paint Bucket icon and the other a Pencil icon. Click on the 'Paint Bucket' icon to access the Visual Designer.
Step 5
In the slide-out panel, go to the 'Colors' tab.
The 'Colors' tab is split into 3 main sections: Base colors, Additional content colors, and Additional content colors.
Base Colors
This is a range of color settings that are required for the base level of your theme design. These include Body, Header, Logo (if you are using plain text as your logo), Main Navigation, Secondary Navigation, Navigation Dropdown, Content, Button, Footer. Within each part there a variety of color pickers.
Additional content colors
These are additional background and text color options you can set that can then be used throughout your site on components and pods. You can control the background (including solid, linear gradients, or radial gradients), Heading, Secondary Heading, Body Text, Link, Link Hover, Borders, Highlight, and Highlight Text. You can add unlimited additional content color combinations.
Additional button colors
These are additional button color options you can set that can be used throughout your site anywhere a button is added. You can control the background (including solid, linear gradients, or radial gradients), text, and borders of both the initial and hover/active/focus states. You can add unlimited additional button color combinations.
Step 6
Set the Base colors for your Theme Design.
Step 7
Add as many or as few 'Additional content colors' combinations as your Theme Design requires.
Step 8
Add as many or as few 'Additional button colors' combinations as your Theme Design requires.
Step 9
Once you're happy hit 'Save and publish'.
