Adding background colour to snippet content areas

Using the Colour Editor popup you can quickly change the background colour and borders of elements in the snippet block.

Adding background colours to snippet block content areas

• Click into the snippet block on your page you would like to change the visibility for, 
• then click the BLUE COLOUR PALETTE ICON that appears on the row tools icons top left of the snippet. This will launch the Colour Editor.

You can then add colours to any of the fields shown by clicking into the field and setting a colour by using the colour popup, or by pasting in a colour value you have copied / typing in a colour value in the field.

What colours can be set

The colour popup finds all the main block elements in the active Snippet Block and displays them as boxes within the popup window. By default the Background and Border colour fields are visible (The background colour is the larger box above, and the border value is the smaller box below).

Text colours can also be found by either closing the Background and Border section or by scrolling further down the popup window.

Changing the colour in Card Snippets

Card snippets are Snippet Blocks that have dedicated colour areas inside the snippet to give the appearance of cards. You can target these colour fields along with the other standard options. The fields will generally be called CARD or INNER.

A range of Card Snippets can be found in the CARDS section when adding a new Snippet Block (as shown below) or by changing the FAVOURITES drop-down to Cards via the drag-drop right-hand sidebar.

Copying / Pasting colour values

You can click into any field with a colour value and copy the current colour or paste in a new colour that you have copied.

• Click into the relevant field so the cursor is showing
• Press CTRL + A to highlight all the colour code
• Press CTRL + C to copy the existing colour
• Presss CTRL + P to paste in a copied colour value

Deleting an existing colour values

You can click into any field with a colour value and remove the current colour.

• Click into the relevant field so the cursor is showing
• Press CTRL + A to highlight all the colour code
• Press DEL on your keyboard to clear the colour

Using colours found on the page

You are able to quickly apply colours found on the page by dragging-dropping the required colour into the relevant colour box.

Setting transparency

When choosing a colour you can set the transparency level via the horizontal slider at the bottom of the colour chooser.

Setting a Border colour

The second colour field below the main colour field will set the border colour for the element. In the screenshot below, the border has been set to 5px wide to make if stand out.

Note: Border colours will only show if a border has been set previously via the Style Editor popup.