Theming guide

When you provide us with your deployment requirements we will use these to theme your site. This article shows you what we can change, including your theming colours, logo and any widgets applied.

Once we have themed your site we will ask for your approval and sign-off as we want to make sure it is right before you go live.

Deployment requirements:

  1. Choose your Simulator URL
  2. Supply your organisation’s logo (mobile and desktop)
  3. Choose your theme colours (header, background and buttons)
  4. Supply your banner image
  5. Supply up to 10 demographics questions
  6. Supply details of any widgets

There is more information on each of these requirements and how they fit together in our Simulator set up journey article, but let's now look at how each of the elements you have given us will be reflected on your site.

Button behaviour

All buttons in Simulator have a rollover state:

Inactive buttons will appear grey with your chosen button colour as the font colour. 

Review and finish standard button, with grey background and theme colour, in this case dark purple, text.

When a mouse rolls over it, a button’s colours will invert. The font colour for the inverted state will ideally be white or black depending on which option is most accessible (passes accessibility testing) against your chosen button colour. It is worth bearing in mind that if you prefer, we can make the button another colour (as long as the colour chosen is also accessible).

Review and finish button selected, so now inverted in colour, with dark purple background and white text.

Your chosen button colour will be consistent throughout the entire simulator, with the exception of the slider group menu - the slider groups can have a different colour to the buttons, and this colour will be consistent across the slider groups.

When a slider group is selected, the button will remain inverted to indicate which group the end user is in, to aid navigation. Other slider group buttons will continue to react to the mouse rollover.

Slider groups that are active will have dark background theme colour with white text, whereas non-active groups will have the grey background and feature colour as its text colour.

Please note that on mobile and tablet screens, buttons always appear in their inverted state.

Welcome page

1) Choose your header background colour

Pick from one of our existing preset themes by giving us the colour’s name. Alternatively, give us the hex code of your own colour and we will accessibility check it for you.

You are able to edit the title text. The font colour will ideally be black or white depending on which is the most accessible option against your chosen banner colour, although we can make this another colour if you would prefer and the colour chosen is also accessible..

2) Supply a mobile and desktop logo

If your organisation’s logo is wider than 100px, you will need to supply an alternative suitable for mobile.Logos on all screens must be 100px tall.

3) Choose your banner image

We recommend dimensions of 3000 x 410 pixels. Supplied as a PNG (best for illustrations) or JPEG (best for photos). Please supply the best quality image possible as that helps it look even better on your site.

4) Choose a background colour

This is the colour that will sit behind the banner image and appear in place of it on other pages, such as the slider page.

5) Decide which widgets you want

Facebook and Twitter widgets can appear on the welcome page and/or thank you page. The widgets will have either a black, white or no background. 

6) Choose your button colour

This will be the same as all other buttons within the simulator (as mentioned in the button colour section of this article)

Screenshot of an example Simulator homepage with the 6 theming options numbered on the image.

Sliders page

This page shows the background colour you have chosen (1).

As mentioned, you can choose a different button colour for the slider groups, independent of the other site buttons. These selections are reflected on the sliders page (2).

The budget page which highlights where the theme colours are present, including the header bar background, the slider buttons, and the navigation buttons back to the introduction or to proceed to review and finish.

Consequences page

As with the sliders page, the consequences page will have your chosen background banner colour and your chosen button colour.

Consequences page with the same theme colours used in the header background bar and the navigation buttons.

Demographic questions page

You can supply us with up to 10 demographics questions.

The supported answer components are:

  • Radio buttons
  • Drop down list
  • Check boxes
  • Free text field

Please refer to our support article Demographic questions in Simulator for more details.

You can include demographic questions at the end of your Simulator. Frequent questions include age, gender, working status, ethnic groups, and postcode or area.

Thank you page

Theming on the thank you page will reflect the choices you have made for the welcome page.You can decide which widgets you want on this page too — Facebook and Twitter widgets can appear on the welcome page and/or the thank you page.

Thank you page in Simulator after a person submits their response.