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 techie? And, without sacrificing responsiveness?
That's why we have introduced Theme Designer:
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. The latest versions of our example themes are already compatible, so please feel free to test out the Theme Designer by creating a new theme, selecting one of these as the foundation: Card, Square, Flex, Scaffold.
You can access the Theme Designer:
- In your experience:
- Create a campaign and select a theme like Card or Square.
- Head to Design & Structure and hit the Customize button.
- Changes made here will only impact the current campaign.
- 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's 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.
The latest versions of our system themes are already compatible, feel free to test out the Theme Designer by creating a new theme, selecting one of these as the foundation: Card, Square, Flex or Scaffold.
Flex or Scaffold may be the best options for a new customisable theme, as they offer more of a 'blank canvas' to start from (They have no pre-existing style to them).
Theme Designer Overview
The Theme Designer is available in two locations, under Assets then Themes as Edit theme or Theme Designer and as the option customise in the Activation area Design & Structure.
Customising within Assets allows you to make changes to a theme that all campaigns can then use, customising within an Activation area makes changes that only affect that activation. Neither the Customise or Theme Designer option will be available if the theme was not originally created or cloned with the configurable option set during the wizard.
Here's an overview of the settings:
|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.|
|z||Less Souce||Additionally, a designer or developer can extend CSS with dynamic behavior by adding Less.js source code..|
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.