Color Swatches

How to setup your color swatches

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Color swatches

Creating a swatch is a way for the user to fully customize the look and feel of the website, while adding his personal touch with ease. Do not hesitate to create as many swatches as you can and play around with them, until you reach the desirable effect. The Swatches menu option on the left is where you add swatches. To add a new swatch, select the Swatches > Add New option from the left hand WordPress menu. When you create a new swatch, you need to setup the swatch's colours. logo

When you have set each component's color, one option that you have to set is the Overlay Color and Overlay Opacity.

  • Overlay Color: color used for overlays e.g. portfolio hover effect.
  • Overlay Opacity: how see through is the overlay in percentage.

Now click on the Swatch Status option on the right side of the page, to enable the swatch. All enabled swatches are now ready to be applied to the frontend of your theme. All you have to do is choose them from the swatch options that appear throughout the theme option panels.

Take a look at the video on how to create and use color swatches : color swatches video

Default swatches

Angle comes with a ready made set of default swatches. You can view all these swatces in the Swatches menu.

swatch list

For each one you can see a preview of how it will look. You can edit, add new or delete existing swatches from the list. In order to use a color swatch you need to enable it. To do so, click on the swatch and select enable in the Swatch status box.

swatch status

In case you need to restore the original swatches in your wordpress panel click on Angle<Colours and click on the install defaults button

swatch status

Loading Swatch CSS

The loading of the Swatches' CSS can be set from Angle->Advanced, from the Swatch CSS Loading option. It defines where the dynamic swatch css that is created by your swatch options is saved. If you are using a lot of swatches it is recommended to save them to a file. If you dont have access to the filesystem you can save them in WP and inject them into the head.

swatch status

Changing the colours of a page

The look of a page can be changed in Angle by defining a swatch for every section of that page, the swatch for the header of the page and also by overriding the top navigation swatch and the footer swatch.

Take a look at the video on how to define the swatches of a single page : single page swatches