James Ford,
watea plus logo

Wātea Plus. You’re in control.

Wātea is a versatile and visually appealing theme that is popular with Government sites. Based on feedback from the CWP community, the latest release introduces new functionality allowing agencies to customise the look of their site with minimal input from developers, and better align the theme with their brand.

If you’re already sold on Wātea Plus, we’ve provided some next steps.

New Wātea Plus homepage

Introducing Wātea Plus

The project was a collaboration between SilverStripe’s design, bespoke, and product development teams. We’ve created a new area within the CMS where a site administrator can choose from a selection of fonts and colours to quickly and easily transform the appearance of their site.

Wātea Plus makes it easier to spin up a customised site on the Common Web Platform and, in conjunction with the subsites feature, agencies are now able to create a themed set of sites based on a colour palette.

As part of this project, we’ve also made minor improvements to the default typography styles and template layouts.

New theme settings screen  

The main CMS feature of Wātea Plus is the new theme settings screen, where a site administrator can select which fonts and colours to use throughout the site.

Wātea Plus theme settings screen

Wātea Plus theme settings screen

The original Wātea typeface, Nunito Sans, remains as the default font option, but we’ve now also included Fira Sans and Merriweather.

Fira Sans is widely used across New Zealand Government websites and is a slightly narrower, more distinguished sans-serif font alternative. Merriweather offers the user a contemporary take on a classic serif font—highly readable with differing weights for web.

Wātea Plus fonts

Wātea Plus fonts

We’ve added a palette of 12 accessible (AA) colours (plus white, light grey, dark grey, and black) that can be selected from the new Theme Settings screen.

Parts of the theme that can be colour customised include the header background, navbar background, carousel background, footer background, text-link colour, and ‘accent’ colour which in turn affects the navigation hover state, button backgrounds, and button borders.

Wātea Plus colour picker

Wātea Plus colour picker

The default colour palette has been chosen to cover a broad spectrum of use-cases. But, for situations where the available colours may not match your brand, we also built this feature with extensibility in mind, ensuring that developers can easily adjust options as required.

Adding additional colours or customising the hex codes of existing colour variables can be achieved via yaml configuration and scss variable adjustment.

SilverStripe\SiteConfig\SiteConfig:
 enable_theme_color_picker: true
 theme_colors:
   # Edit existing pink color
   pink:
     Color: '#C12099'
   # Add new brown color
   brown:
     Title: 'Brown'
     CSSClass: 'brown'
     Color: '#594116'

How to get Wātea Plus

Talk with your development team about getting Wātea Plus added to your site (or sites).

These features are opt-in via the CWP Agency Extensions module(external link).

If your site is already using the Wātea theme, it’s likely you already have the module. In this case, all that’s required for access to Wātea Plus is an upgrade to the module's latest stable version and having your developer enable the feature.

For everything you need to know about this feature, check out our Wātea Plus user documentation or developer documentation(external link) 

Back to the news

Last modified: