Learn how to change the colours of a Single Digital Presence website and see an example of a successfully themed page.
On this page:
This guide is intended to show site admins the process of entering values to theme a site.
Theming colour choice and testing should be completed by a designer and approved by SDP and site owners before any site theming changes are made.
Once theming decisions have been approved, you will receive all the tokens and hex codes you need to input and you can follow the instructions below.
You’ll need at least Site Admin permissions in the Single Digital Presence CMS to use these instructions. If you do not (if you’re an Editor or Approver, for example) and would like to request changes to a site’s theming, please contact the Single Digital Presence content team on digital@dpc.vic.gov.au.
Only sites (e.g. vic.gov.au) can be themed. Site sections (e.g. Child Safe Standards) cannot. If you try to theme a site section, it will not display on the live site.
How to change the colours of front-end elements on an SDP website
Start by clicking Structure, in the top menu, then selecting Taxonomy.
On the Taxonomy screen, find Sites and then click List terms.
You’ll see a list of the sites and site sections (first indent) in your SDP CMS.
Click Edit on the site you’d like to theme. You can only theme sites and not site sections, so make sure you select edit on a site.
On the Edit term page of the site you wanted to theme, scroll down until you see SITE THEME VALUES.
In the Key field, put the token for the design element you want themed. For example, the token for the primary colour of your site is
rpl-clr-primary. In the Value field, put the HEX colour you want to display. For example,#004c97is a blue colour.
To theme another design element of your site, press Add another item to add another key-value pair.
Once you’ve added all the theming elements you need, scroll down and click Save.
It can take about 5 minutes for your changes to display on the front end of your site.
Available tokens and what they theme
Token ('Key') | Input ('Value') | Front-end element |
|---|---|---|
rpl-clr-primary | Any single HEX colour code | Top navigation bar.  |
Block quote quotation marks.  | ||
Header Page title/heading  | ||
Button fill (not text)  | ||
Topic and tag (outline not text)  | ||
rpl-clr-primary-alt | Any single HEX colour code | Top navigation search background  |
Top navigation mega menu background  | ||
rpl-clr-primary-alpha | Any single rgba colour code Example: rgba(172,48,119,0.5) Note: this must be your rpl-clr-primary at 50% opacity. | Mega Menu hover and selected links |
rpl-clr-accent | Any single HEX colour code | Expanded accordion left side border  |
Callout left border  | ||
Header Highlight page title blocking (dark theme)  | ||
rpl-clr-accent-alt | Any single HEX colour code | Header Highlight introduction text blocking (dark theme) |
Callout background | ||
rpl-clr-link | Any single HEX colour code | Card heading when hovering  |
Banner journey link icons  | ||
Social share icons  | ||
Contact block icons  | ||
Accordion 'open/close all' text and icons  | ||
File icon  | ||
Pagination ‘next/previous’ arrows  | ||
Inline text links  | ||
rpl-clr-focus | Any single HEX colour code | Button background when in focus  |
Outline of a selected input field (eg search)  | ||
rpl-clr-gradient-horizontal | Use multiple HEX colour codes and percentages to get your desired gradient. Must be entered as the example shows below (only change being desired HEX codes and percentages. Percentages represent the position of each colour). Example: linear-gradient(90deg, #D61634 0%, #D42B8B 40%, #652484 80%) | Anywhere the ‘highlight’ horizontal gradient elements are used (eg promo cards)  |
rpl-clr-gradient-vertical | Use multiple HEX colour codes and percentages to get your desired gradient. Must be entered as the example shows below (only change being desired HEX codes and percentages. Percentages represent the position of each colour). Example: linear-gradient(90deg, #D61634 0%, #D42B8B 40%, #652484 80%) | Table of contents left line  |
Line next to address in contact block  | ||
rpl-clr-type-primary-accessible | Only your primary HEX or #1A1A1A. The HEX value will be your primary colour if it is accessible with white text. If it is not, you must use #1A1A1A. | Back to top button content  |
Example: #1A1A1A | Text inside tag and topic bubbles  | |
rpl-clr-type-primary-alt-accessible | Only your primary-alt HEX or #1A1A1A. The HEX value will be your primary colour if it is accessible with white text. If it is not, you must use #1A1A1A. | Outline button text on hover  |
rpl-clr-type-primary-contrast | Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your primary colour. | Button text  |
rpl-clr-type-primary-contrast-alpha | Only one of the following rgba values.
This must be your rpl-clr-type-primary-contrast colour at 75% opacity. Example: rgba(255,255,255,0.75) | Mega menu search placeholder and underline (on default)  |
rpl-clr-type-accent-contrast | Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your accent colour. | Header Highlight page title (dark theme) |
rpl-clr-type-focus-contrast | Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your focus colour. Example: #1A1A1A | Focus state content (text) |
rpl-clr-footer | Any single HEX colour code Note: If using the default footer theme, the rpl-clr-footer must use the same HEX as the rpl-clr-primary-alt token. | Footer background  |
rpl-clr-footer-alt | Any single HEX colour code Note: If using the default footer theme, the rpl-clr-footer-alt must use the same HEX as the rpl-clr-primary token. | Line in footer below acknowledgement statement  *Note: If using the default footer theme, the rpl-clr-footer-alt must use the same HEX as the rpl-clr-primary token. |
rpl-clr-type-footer-accessible | Only your footer HEX or #1A1A1A. The HEX value will be your footer colour if it is accessible with white text. If it is not, you must use #1A1A1A. | Line separating footer from page content  |
rpl-clr-type-footer-contrast | Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your footer colour. Example: #FFFFFF | Footer text and links |
Example of a successfully themed page
Before (front-end)
Before (back-end)
After (front-end)
After (back-end)
