Customize your themes using Theme Designer
If you're like most of our customers, you will be using a theme that matches your brand guidelines, is responsive and provides consistency between experiences. But what if you need to make some changes now and again, to match specific imagery, a sponsor or sub-brand? Wouldn't it be great if you could just tweak the colours, spacing, typography or sizing without relying on a technical resource? And, without sacrificing responsiveness?
Cheetah Experiences Theme Designer allows you to do just that!
Above: The Theme Designer showing settings on the left, and live preview on the right. The icons on the far left take you to sections for modifying everything from copy, to buttons, to forms. Across the top, you can also see the range of preview options and responsive design modes (desktop, tablet and mobile).
Theme Designer is pretty powerful. It can help you:
- Make style changes to a theme without CSS knowledge
- View changes straightaway via built-in live previews
- View and restore previous versions of a theme
The Theme Designer works with themes built using the latest theme framework. You'll see a Customize or Theme Designer option next to compatible themes, so please feel free to test out the Theme Designer by creating a new theme, select one of these as the foundation: Card, Square, Flex, Scaffold, or Tint and Block for NextGen Experiences.
You can access the Theme Designer:
- In your Experience:
- Create a campaign and select one of our system themes.
- Head to Design & Structure and hit the Customize button.
- Changes made here will only impact the current campaign.
- In the Theme Library:
- Head to Settings > Themes and hit the Theme Designer button.
- Changes made here will impact any campaign that uses this theme.
- You can also create a new theme from an existing, compatible one.
What is a theme?
For those of you not familiar with the term 'Theme', it relates to the look-and-feel of your activation - the font, background colours and styling of a campaign. The Theme Designer allows you to amend these simply and easily without the need for CSS or developer skills.
The Theme Designer works with themes built using the latest theme framework. You'll see a Customize or the Theme Designer icon next to compatible themes.
Theme Designer Overview
To recap, you can access the Theme Designer from two locations:
- Go to the Folder area in top right-hand corner > Themes > and click on + New Theme. Select one of our system themes and check Enable customizations. You will see the palette icon next to your theme and that means you can start customizing your theme and the changes will be applied to all experiences using this particular theme.
- Or, go to your Experience > Design & Structure (Macro Experiences) or Build (NextGen Experiences) and click Customize. Changes made on an Experience level will only be applied to this particular experience.
The Theme Designer menu on the left-hand side has been designed to take you through a series of steps that need to be completed to design your own theme. The majority of your updates will be done in Common Settings, Headings & Copy, Buttons, and Theme Assets (area where you can upload your own brand fonts).
Here's an overview of the settings:
| Option | Description | |
|---|---|---|
| c | Common Settings | This forms the base for your theme. On creation, any changes made in this section will cascade down to all other sub-categories automatically. You can also select “Inherit” as the option in any sub-categories in order to use the setting used in this section. |
| A | Headings & Copy | To change the font, positioning and spacing of text in Headings, Bylines & Copy / Description. |
| ⁄ | Buttons | To change the font, colour, styling and positioning of Buttons. |
| Æ | Navigation & Header | To change the colour of the Header background, and the font, colour and positioning of the Navigation text. |
| 6 | Forms | To change the font, colour, styling, spacing, positioning and error message colour of all Forms (including Quiz Questions). |
| g | Key Elements | This allows you to change Icons (arrows and play icons), overlay colours and poll results colours. |
| π | Advanced | Here you can set the between element spacing and change the direction of text (left to right, right to left) throughout. |
| e | Theme Settings | You can change the name of the theme, and add an image icon for the theme. |
| 2 | Theme Assets | Here is where you can load in any custom fonts that you want to use in the Theme Designer or any image assets. |
| Z | CSS Overrides | We only surface the most popular elements to be amended in the Theme Designer, should you wish to configure any elements that are not in the Theme Designer you can use this area to include CSS. N.B. This overrides, and will continue to override any other changes in the Theme Designer. |
| ‘ | History | An audit trail of editions and revisions of the theme. |
Within the Theme Designer area, the left side sub-headings cover a range of available elements to customise, the right side works as a real-time preview of the changes you're making. If you're ready to create a new theme, check out the guide here.