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

On our Enterprise Version and above you can copy and then edit our base themes, creating your own custom theme.

From the Survey Designer click on Designer -> Content
Select the theme selector using the icon
Click the Theme that you would like to use as the basis of your new theme and then click the Copy Theme button
A new theme is created and your can provide the new theme with a new name to reflect your customizations
Customise the theme parameters
Save the theme changes and apply the new theme to the survey
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.

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.

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.

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; 

}

Open Example

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.