Hello! How can we help?

Search our knowledge base for loads of useful advice and answers to common questions

If you're still stuck you can always submit a support request and we'll get back to you ASAP

Theming options - changing the look of your Citizen Space site

Natalie Williams -

When we deploy a new Citizen Space site there are some things we can change to make your site look and feel like part of your organisation, and to set it apart from other Citizen Space sites.

 

Brand colours

Firstly, we can add a selection of your brand colours to the site. The easiest thing is if you supply us with either:

  • an existing website you'd like us to copy the colour palette from (such as your organisation's main website) or
  • a list of your brand colours, such as in a brand guidelines document

We'll then choose the best colour combination for the site and ask you to review our choices and confirm you're happy with them.

However, if you're keen to be more prescriptive about which colours go where, you can read on for a specific guide on what we're able to change.

With either of these approaches, after adding your chosen colours to the site, we use an online tool to check that the chosen combinations meet an acceptable level of colour contrast from an accessibility perspective and will advise you if we'd recommend changing one or more of the colours.

Global navigation colours

Across the top of your site there is a global navigation bar which will display your organisation logo as well as navigational links and a search function. This bar is always visible for public visitors to the site.

We can control:

  • the background colour of this navigation bar (this is often white as many organisations have a coloured logo, but you can also take the opposite approach and have a white version of your logo on a coloured background)
  • the colour of the link text on this navigation bar
  • the colour the links change to when someone hovers their cursor over the link

Screenshot of site-wide navigation bar

(NB. The third navigational link in the above screenshot is a different colour because the cursor was hovering over it.)

  • the colour of the search function button
  • the colour of the magnifying glass icon on the search button
  • the colour of an optional strip we can add below the site-wide navigation bar. This can be useful for adding a flash of another brand colour, or to imitate the layout of another website from your organisation - please see some examples below.

This council's Citizen Space site has a flash of luminous green, one of their brighter brand colours (shown here with the Delib logo instead of the council logo):

Screenshot of site-wide navigation bar with thin green strip below

This council has a thicker black strip to match the design of their .gov.uk website (shown here with the Delib logo instead of the council logo):

Screenshot of site-wide navigation bar with thick black strip below

 

Banner colours

We can control the background colour of the banner on the homepage. The site will display a block of this colour if you have no banner image, or if you have but the image hasn't loaded yet.

We can also control the colour of the intro text box on the banner and the colour of the text itself.

This example has dark red as the banner background colour, white as the text box colour and grey as the text colour:

Screenshot of banner with intro text

 

Feature colour

We can choose one colour which will be used on consultation title strips and other highlights, and we can set the colour of the text which appears against that feature colour.

Screenshot of a consultation title strip

This council's feature colour is red, so it appears on their consultation titles as shown above, as well as in their consultation listings, as shown below:

Screenshot of a consultation listing on the homepage

 

Call to action colour

The call to action is a box towards the bottom of every consultation overview page which lets respondents know how they can participate in the consultation, such as by going into the online survey. It's a good idea to choose a bright colour for this box so that it draws the attention of your respondents.

Screenshot of the call to action box

 

Button colour

This is the colour of the buttons that respondents use to move through the survey. Your choice needs to pass colour contrast against white, as that is the colour of the button text and cannot be changed.

Screenshot of the survey buttons

 

Other branding elements we can control

Organisation logo

We can add one organisation logo to the top left-hand corner of the site, which will be visible at all times. (Please note that you have the ability to add further logos to relevant consultations being run in partnership with other organisations).

Screenshot of a site-wide logo in the top left-hand corner of the page

 

Favicon

We can upload a favicon, which will appear next to the page title in people's browser tabs.

Screenshot of a favicon displaying in a browser tab

 

Banner image

Lastly, we can add a banner image that sits behind the intro text on your homepage, and by default appears above the title on your consultation pages (though this can also be disabled on a consultation by consultation basis).

This might be a landscape photo:

Screenshot of a landscape photo banner image with a power station on one side and a windmill on the other

Or a more abstract image or graphic:

Screenshot of a graphic banner image with coloured spots on a white background

Please supply an image that is around 3000px wide by 1000px tall. This allows us to crop and resize the image as required. Please note that this is not a set image size as how tall the image depends on how much text you have on your Consultation Hub.