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.
- Choose your Simulator URL
- Supply your organisation’s logo (mobile and desktop)
- Choose your theme colours (header, background and buttons)
- Supply your banner image
- Supply up to 10 demographics questions
- Supply details of any widgets
There is more information on each of these requirements and how they fit together in our Budget 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.
All buttons in Budget Simulator have a rollover state:
Inactive buttons will appear grey with your chosen button colour as the font colour.
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).
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.
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.
Please note that on mobile and tablet screens, buttons always appear in their inverted state.
The 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 2048 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.
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)
The 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 Consequences page
As with the sliders page, the consequences page will have your chosen background banner colour and your chosen button colour.
The Demographic questions page
You can supply us with up to 10 demographics questions.
The supported answer components are:
Drop down list
Free text field
Please refer to our support article: Demographic questions in Budget Simulator for more details.
The 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.