Theming options - changing the look of your Citizen Space site

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, this includes: 

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

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.

Feature colour

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

Screenshot of an activity title strip.

Call to action colour

The call to action is a box towards the bottom of the overview page which lets respondents know how they can participate in the activity, 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.

Give us your views call to action with Online Survey link.

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 activities being run in partnership with other organisations).

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 activity pages (though this can also be disabled on an activity by activity basis).

This might be a landscape photo:

Example of a Citizen Space homepage banner with a landscape image as the background wallpaper, a block of welcome text to the left, and two small boxes with links on the right.

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 the height of the image when displayed will depend on how much text you have on your homepage.