Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 12 Next »

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

  1. Start by clicking Structure, in the top menu, then selecting Taxonomy.

  2. On the Taxonomy screen, find Sites and then click List terms.

  3. 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.

  4. On the Edit term page of the site you wanted to theme, scroll down until you see SITE THEME VALUES.

  5. 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, #004c97 is 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
Example: #AC3077

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
Example: #8A265F

Top navigation search background

Top navigation mega menu background

rpl-clr-primary-alpha

Any single rgba colour code
Must be entered as the example shows below.

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
Example: #465870

Expanded accordion left side border

Callout left border

Header Highlight page title blocking (dark theme)

rpl-clr-accent-alt

Any single HEX colour code
Example: #ECEEF1

Header Highlight introduction text blocking (dark theme)

Callout background

rpl-clr-link

Any single HEX colour code
Example: #AC3077

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
Example: #75D9A0

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.
Example: #FDDA24

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.
Example: #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.
Example: #1A1A1A

Button text

rpl-clr-type-primary-contrast-alpha

Only one of the following rgba values.

  • rgba(255,255,255,0.75)

  • rgba(26,26,26,0.75)

This must be your rpl-clr-type-primary-contrast colour at 75% opacity.
Must be entered as the example shows below.

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.
Example: #FFFFFF

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
Example: #006676

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
Example: #008094

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.
Example: #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)

  • No labels