Learn how to Inputting approved theming specifications (including tokens and hex codes) will change the colours of a Single Digital Presence website and see an example of a successfully themed page.
On this page:
| Table of Contents |
|---|
...
This guide is intended to show site admins the process of entering values to theme a site.
your site on the front end.
| Note |
|---|
Theming colour choice and testing should be completed by a designer and approved by SDP and site owners before any site theming changes are madewith Figma knowledge. Once theming decisions have been approved, you will receive all the tokens and , hex codes you need to input and you can and other specifications will be provided. You can then follow the instructions below. |
| Info |
|---|
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. |
...
On this page:
| Table of Contents |
|---|
Input values to theme the 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 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.
...
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. Don’t include a space between rgba and the bracket. | 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%) (note hyphenation of linear-gradient and no space before open bracket) | 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%) (note hyphenation of linear-gradient and no space before open bracket) | 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) Don’t include a space between rgba and the bracket. | 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 |
Applying the ‘neutral’ theme to components of your site
When a designer hands over the specifications for the site, they will specify if neutral components are required. Neutral themes will usually be applied when there is potential for an accent colour to be overused, or if the site ‘feel’ should be ‘toned down’.
The 'neutral' theme can be only applied to the following components:
Component | Default theme | Neutral theme |
|---|---|---|
Header / |  |  |
Buttons |  |  |
Footer |  |  |
Please note:
You don’t have to apply all 3 tokens at once.
For example, you might just like to apply the neutral theme to your footer.
The neutral components styling and colours cannot be edited or customised.
The neutral theme will be applied at a site level, and will affect all instances of the component.
Inputting neutral theme tokens
Start by clicking Structure, in the top menu, then selecting Taxonomy.
On the Taxonomy screen, find Sites and then click List terms.
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 feature flag values.
Open Site feature flag values .
Input the Keys and Values you have been given.
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 |
|---|---|---|
headerTheme | neutral |
|
buttonTheme | neutral |
 |
footerTheme | neutral |
|
Example of a successfully themed page
Before (front-end)
...
Before (back-end)
...
After (front-end)
...
After (back-end)
...