Adjust your template colors

Email Marketing Documentation

Documentation > Email Marketing > Adjust your template colors

Overview

Although we provide a number of color schemes you may want to apply your own color scheme to suit your branding requirements.  We recommend cloning an existing template and adjusting the template rather than modifying one of the standard templates.

What can be changed

Using the screenshot below you will see how the styles in the style sheet can be modified to adjust the colour scheme in your template.


In the above diagram, the coloured items are:
  1. Background of the table which uses the light-white-box class
  2. Heading under the image which uses the blue-inner-heading class
  3. Dates under the heading which uses the event-date class
  4. The heading inside the box which uses the content-title class
  5. The background color of the cell which uses the highligh-bg class
  6. The colour of the button which uses the bold-color-btn class
There are other elemnts available to be modified in the css. Using the instructions below to edit the css you can search for "color" to find other css classes to be modified.

Changing the template

The css for each template is available to be edited directly in Kentico.
  1. Navigate to the template to be modified. Applications > On-line marketing > Email marketing > Email templates
  2. Select the pencil icon for the template to be modified
  3. In the template editor, using the search function (CTRL+F or Command+F) to find the class to be modified
  4. Modify the color attribute of the class to suit your requirements
  5. Save your changes
In addition to changing the css classes used you can also mdoify the background color of the email template.
  1. Navigate to and edit the template for the template to be modified (as above)
  2. Use the search function to find "<body"
  3. Modify the background-color element of the style applied to the body tag
  4. Use the search function to find "<table"
  5. Modify the bgcolor attribute of the table tag 
  6. Save your changes

A quick reference for hex colours is available here, and a tool to geneerate color schemes is available here.