In this exercise you are going to implement a new website theme containing an additional colour palette.

You will be:

  1. Creating a new css file within the CMS
  2. Updating the Global Metadata Schema to include your new theme

Creating your new website theme

Locate the following folder within the CMS

Style Folder

Right click on the Styles folder,  select Create New, search for css and select CSS File

CMS Create CSS File

Give the asset a title, such as green-theme.

CSS Name file

Edit the file by locating the 3 dots in the asset's header and paste in the code below:

CSS Edit File

/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Lato", sans-serif;
}

/* Global Colors */
:root {
  --background-color: #ffffff;
  --background-color-rgb: 255, 255, 255;
  --default-color: #212529;
  --default-color-rgb: 33, 37, 41;
  --primary-color: #37726d; /* Green */
  --primary-color-rgb: 15, 52, 47;
  --secondary-color: #4e5d6c;
  --secondary-color-rgb: 78, 93, 108;
  --contrast-color: #ffffff;
  --contrast-color-rgb: 255, 255, 255;
  --background-light-overlay: rgba(300, 300, 300, .55);
  --background-dark-overlay: rgba(38, 38, 38, .55);
  --button-background: #707070;
  --button-background-hover: #ffffff;
  --alert-warning-color: #ffc107;
  --alert-error-color: #c62828;
  --alert-success-color: #2e7d32; /* Green */
    --heading-background-color:var(--secondary-color);
  --heading-color:var(--contrast-color);
}

/* Nav Menu Colors */
:root {
  --nav-color: #3a3939;
  --nav-hover-color: #37726d; /* Green */
  --nav-dropdown-color: #3a3939;
  --nav-dropdown-hover-color: #37726d; /* Green */
  --nav-dropdown-background-color: #ffffff;
  --nav-mobile-background-color: #ffffff;
}

Save your file and click the title in the header to copy the asset ID

CSS Asset ID

Applying your new website theme

Navigate in the tree to find the siteTheme metadata, or use the search bar to locate it. Open the asset's Details.

CSS Locate Theme metadata

Edit the asset's details, scroll down to the table below, and add your new theme by applying the asset ID and the name you would like displayed to CMS users.

CSS Apply new theme to Metadata

Edit the metadata on your site asset to confirm the new theme appears and can be applied to your site.

Looking for some design inspiration?

If you want to extend this exercise further, you may want to use:

FlatUIColors

Hex to RGB.