Support and Feedback

KnowledgebaseSupport
Submit a support request

Creating Custom Themes

It is often a requirement of survey design to create a custom theme to match the exact styles of your client's branding
Reference Guide
On our Enterprise Version and above you can copy and then edit our base themes, creating your own custom theme.
  1. From the Survey Designer click on Designer -> Content
  2. Select the theme selector using the icon
  3. Click the Theme that you would like to use as the basis of your new theme and then click the Copy Theme button
  4. A new theme is created and your can provide the new theme with a new name to reflect your customizations
  5. Customise the theme parameters
  6. Save the theme changes and apply the new theme to the survey
  7. Adjusting themes can be an iterative process and you may need to adjust, review, edit and repeat to get your theme just right
The main core elements of the themes are exposed as variables. This will allow users to customise themes by changing the core variables, rather than changing individual styles.
CSS Root Colour and Fonts
By changing the individual elements in the custom Theme CSS you can apply the change to all elements that use the style variable. The image below shows example controls and highlights the variables that are used for individual control elements.
Theme Main Elements
You only need to change the elements that you wish to adjust. For example, if you just wanted to change the font, you could include a new version of the root variable and just change the common font used.
CSS Root Example
You can continue to use standard style inheritance to adjust styles and all existing themes will continue to work as previously designed. Inheritance elements are only applicable to Theme2 Themes. Customers using an old Theme1 Theme must continue in their standard style inheritence.
Other elements not currently included in the root variable, will be added to the root variable in coming releases. You can also make other changes as required using traditional CSS style changes. For example: -
 :root {
   --common-font: Arial, Helvetica, sans-serif;
   --common-font-input: Arial, Helvetica, sans-serif;
   --common-textstd-color: #000000;
   --common-textalt-color: #000000;
   --common-textlink-color: #aaaaaa;
   --common-texthover-color: #000000;
   --common-textdark-color: #000000;
   --common-textlight-color: #ffffff;
   --common-bg-color: #666666;
   --common-hover-color: #b7cdda;
   --common-selected-color: #007db4;
   --common-enabled-color: #ededed;
   --common-green-color: #008000;
   --common-red-color: #ff0000;
   --common-orange-color: #ffa500;
   --common-navigation-background: #007db4;
   --common-navigation-text: #ffffff;
   --common-navigation-hover: #ffffff;
   --common-navigation-active: #ffffff;
   --common-grid-normal: #D8DCDF;
   --common-grid-alt: #fafafa;
}

.wsc_body {
   background-image: initial;
   background-repeat: initial;
   background-position: initial;
   background-color: #eeeeee;
}
We recommend utilizing a tool such as the Chrome Dev Tools which will allow you to see the markup, html structures such as <div> and <p> and the CSS styles that are used for the survey html structures.

This will make it easier to determine the right style to adjust and also allow you to play with the styles to obtain the best result.

The Chrome Dev Tools are perfect when testing your Custom Javascript too.