Input Ripple theming values into the CMS

Owned by James O'Dwyer (Unlicensed)
Last updated: 02 Jul, 2024 by Jo Tayler
9 min read

Inputting approved theming specifications (including tokens and hex codes) will change the colours of your site on the front end.

Theming colour choice and testing should be completed by a designer with Figma knowledge.

Once theming decisions have been approved, the tokens, hex codes and other specifications will be provided. You can then 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.

On this page:

Input values to theme the 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

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.

Don’t include a space between rgba and the bracket.

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%)

(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.
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)

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

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

Component

Default theme

Neutral theme

Header /
Image and Reverse variant

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

  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. 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 feature flag values.

  5. Open Site feature flag values .

  6. Input the Keys and Values you have been given.

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

Token ('Key')

Input ('Value')

Front-end element

headerTheme

neutral

  • Header with Image / Text colour

 

buttonTheme

neutral

  • Buttons

footerTheme

neutral

  • Footer

 

Example of a successfully themed page

Before (front-end)

Before (back-end)

 

After (front-end)

After (back-end)

 

Â