Manage the theme of your activity

What is a theme? Your theme sets the overall look of your Citizen Space activities.

Activity overview showing a banner image of a tree canopy and the activity title, Ashley Parks, in blue. Screenshot.

When Citizen Space is deployed, we set up the overall theme of your site for you. Your theme includes your organisation’s logo, brand colours, and a site-wide wallpaper (either an image or block of colour). If you need to change any of these site-wide features at any point, just contact your customer success manager.

Sometimes, you might want one of your activities to have its own look. Perhaps you’re consulting on a project that has its own logo or branding, or maybe you’re running an engagement exercise with several other organisations and need to include their logos. Admins can change the look of their activities by managing the theme.

How to manage the theme of an activity

Log in to your admin account.

Select the activity you want to edit.

On the dashboard, select 'Manage Theme'

Top of Dashboard with Manage Theme link highlighted.

To manage the theme of an activity we’ll look at how to:

1. Choose an activity banner

You have 4 options here:

The site-wide wallpaper

This is the default option and displays the same wallpaper image that appears on your site homepage. 

A full-width activity banner

This option allows you to replace your usual site-wide wallpaper with a different image. If you've created a survey that refers to a particular place, for example, you could use a picture of the place as the banner image. Ideally the image will be around 150 pixels tall by 1000 pixels wide, and no more than 750KB in file size.

There are some sample banner images attached to the bottom of this article if you'd like to experiment with uploading one.

If you want to add an image that has text on it, we recommend you use the 'one or more logos' option rather than choosing to add it as a full-width banner image.

Note: There are a few important things to consider when choosing a suitable banner image, like size and copyright. Find out how to make images look great in Citizen Space.

If your homepage has an image-based listing the activity banner image you select may appear as an image on your homepage. For information on setting images for these listing types, please read this article. If you're interested on how to configure your hub to add images to the listings, please get in touch with your customer success manager. 

One or more logos

This allows you to add extra logos specific to this activity. These might be the individual logos of other organisations collaborating with you on this exercise or could be a single logo/branding image. If you are adding a single logo/piece of branding, this should be no taller than 400px tall and up to 940px wide (but can be smaller than this if you wish).

Please note, this option will only add these logo(s) to the specific activity you are amending.

There is a sample logo attached to the bottom of this article if you want to experiment with uploading one. You can upload it more than once if you want to see how the activity looks with multiple logos.

Note: There are a few things to bear in mind when uploading logos. Read how to make images look great in Citizen Space for some pointers.

There are some more options if you choose to add logos:

The logo editing screen within the 'manage theme' option showing how you can add a background colour, move logos around and add a description of each logo. Screenshot.

Background colour: this appears behind your logos; the default is white. Logo description: this is the alternative text that will be used by screen readers, giving people with visual or cognitive impairments a description of the image. Link URL: if you want users to be able to click on the logo and be taken to the website of that organisation, add the URL here.Drag and drop to change the order that the logos appear in.

No banner image

You might choose this option if you want this activity to have a plain, minimal look. It will simply have the title of the activity.

2. Preview your changes

The preview box shows you how your changes will look - don’t forget to check both the desktop and mobile view.

The manage theme options and the preview screen showing the chosen option as it would appear on a mobile or desktop view. Screenshot.

3. Save changes

You’re all done!

Example banners and logo