Learn how to change the colours of a Single Digital Presence website and see an example of a successfully themed page.
On this page:
| Table of Contents |
|---|
| Note |
|---|
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. |
| 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. |
...
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 |
...