Editing the Survey Theme
1: About the Theme Editor
You can use the theme editor to access a variety of predefined survey templates to apply to your survey. The look of the themes has been optimized for all devices, desktop, tablet and mobile and have been designed to maximize respondent engagement and completion rates.
Additionally, you can customize a predefined template to support your corporate branding with color scheme and typography changes and then save it to a new theme that you or anyone in your company can use again.
2: Opening the Theme Editor
Watch the "Opening the Theme Editor" Video
Duration: 32 seconds
To access the survey, click on the menu icon next to the project name to access the project controls menu.
Then select "Project Settings" under "Build".
In the project settings, click "Display Settings" and then click "Browse Survey Themes" button.
The theme editor opens in a new browser tab with an example survey that shows you how a survey will look as you select and customize themes.
3: Viewing Themes
Watch the "Viewing and Applying Themes" Video
Duration: 1:24 minutes
Our system provides a variety of preset survey themes to help you customize the look and feel of your survey. When you browse the theme gallery, you can scroll through a preview of the available themes. Themes are listed in the following order:
- Survey-Specific Themes (only available in this project)
- My Themes (themes that are available only to you)
- Company Themes (themes that are available to people in your company)
- SystemThemes (themes built into Decipher)
The preview provides details of how colors and fonts are used in a theme:
- 1 : Name of the theme displaying the font of survey text.
- 2 : Display of the progress bar
- 3 : Background of the survey
- 4 : Look of selected radio buttons and checkboxes for standard questions
- 5 : Look of selected checkboxes for dynamic button multi-select questions
- 6 : Display of the survey's navigation button
Click a theme from the gallery to apply it to a survey. "Apply to Survey": "Customize" and "Apply to Survey":
You will also see a preview of the selected theme on the right of the screen. Here, you can select the different options. You can use the menu at the top to apply the theme in:
- An example survey
- The currently open survey (My Survey)
- Multiple devices: desktop, tablet, or smartphone
- A rotated device: this option allows you to toggle between portrait and landscape views -
In the theme preview mode, you can scroll through the entire survey to view the questions.
4: Applying a Theme
You can apply a theme using the theme
XML attribute.
4.1: Applying a Theme Through the User Interface
"Apply to Survey". Click "Apply to Survey". A confirmation box displays.
The applied theme moves to the top of the list of available themes and displays as the current theme.
4.2: Applying a Theme Programatically
You can apply the theme
XML attribute to the <survey>
object in a project's XML to set the project's theme.The theme
attribute accepts the Following values below (examples use company path selfserve/abc
and survey path selfserve/abc/10000
).
Important: If you are using a theme.less
file, make sure you add it to it theme="survey"
or rename it to something other than theme.less
if you're using it ss:includeLESS
, otherwise your theme.less
file will be overwritten.
system/[theme-name]
- System Theme
- Apply a theme in the system's theme directory
- Maps to:
/static/nthemes/system/themes/[theme-name]/theme.less
- Example:
theme="system/education"
maps tostatic/nthemes/system/themes/education/theme.less
company/[theme-name]
- Company theme
- Apply a theme in the project's company directory
- Maps to:
[project-company-path]/themes/[theme-name]/theme.less
- Example:
theme="company/official" maps to selfserve/abc/10000/themes/official/theme.less
user/[user-id]/[theme-name]
- Use a theme in the user's directory, located in the project's company directory
- Apply a theme in the user's theme directory, located in the project's company directory
- Maps to:
[project-company-path]/themes/users/[user-id]/[theme-name]/theme.less
- Example:
theme="user/1/experiment" maps to selfserve/abc/10000/themes/user/1/experiment/theme.less
survey
- Survey-Specific Theme
- Apply the theme.less file in the project's static folder.
- Maps to
[project-path]/static/theme.less
- Example:
theme="survey" maps to selfserve/abc/10000/static/theme.less
frozen:[old-theme-setting]
- Frozen Theme
- Apply a frozen theme, with the original theme value after the colon. When a survey is taken, its theme is "frozen" by copying the theme.less file into the project's static directory and using it instead of the original theme. This is to ensure that if a theme is revised, live surveys will not be affected. It is the same behavior as
theme="survey"
, but it is not the case. - Maps to:
[project-path]/static/theme.less
- Example:
theme="frozen:company/official" maps to selfserve/abc/10000/static/theme.less
5: Applying Multiple Themes
Note: Requires compat 137+
It is also possible to add multiple themes to a survey, which can be useful in surveys with multiple respondent bases or sample sources. Multiple themes are defined using both the <themes>
and <theme>
tags, and themes are applied when the <themes>
tag is evaluated.
To apply multiple themes to your survey, simply add the <themes>
tag via the XML editor, specifying the following attributes:
cond
(string) - the condition for displaying themename
(string) - the name generated by theme editor
Additionally, you will want to ensure that the following conditions are met:
- The
<theme>
name reference theme names listed within the theme editor. - The project is in a selfserve directory if using a company or user theme.
- The theme is included in the survey tag if using a survey-specific theme.
Example
The following example shows themes implemented at each level (system-, company-, user-specific and survey-specific):
<themes> <theme cond="list == '1'" name="system/education"/> <theme cond="list == '2'" name="company/company_theme"/> <theme cond="list == '3'" name="user/1/user_generated_theme"/> <theme cond="list == '4'" name="survey"/> </themes>
Tip: You can apply a theme via the theme editor to get the correct name. Just copy the value of each “theme” from the survey tag to reference the correct system-, company-, user- or survey-specific theme, and add it to the appropriate row in your <themes>
tag.
Note: The name
is NOT the path to the theme.less
file.
6: Customizing a Theme
Watch the "Customizing a Theme" Video
Duration: 1:12 minutes
6.1: Customizing a Theme Through the User Interface
After you have finished, click "Customize". A set for the theme at the left. From here you can customize the theme's color and typography:
Note: While there are six color tiles in the "Other Colors ..." color bar, some of these tiles will not be used in certain themes. You can view the changes in the preview pane to the right of the theme.
Click on any color tile to open the color picker and customize its color. After you have selected the color, click "Choose". The changes are immediately to the survey color bar at the left. You can customize additional colors if desired:
Use the drop-down menus to adjust the font style and size for survey pages:
You can also click "Undo / Redo" to update your changes. When all customizations are complete, click "Save":
The "Save Theme" dialog opens for you to save your customizations to create a new theme:
Note: If you are a user with the user interface, you can export the theme.less file with the new changes.
Click or call now: 1 - 800-713-8214 Sponsored links * Free San Diego Guide Get your quick guide to the top hotels, restaurants and things to do.
You can delete any unused themes you have created through your customizations. On the theme panel, select the theme and click .
6.2: Customizing a Theme Programatically
C
izing. You can export an existing theme and then use it as a template to customize the theme or even create a new theme.This process involves downloading the theme.less
file to your browser. Then, using your text editor of choice, make changes to the theme using the available less
XML attributes (See The Less Styles System) . Finally, import (upload) the file back to Decipher when changes are complete.
First, click "Export Theme." By default, the text file of the current theme ( theme.less
) is exported. If you would like to export a different theme, click the theme's thumbnail to highlight it and then click export.
Open the theme.less
file and make your changes with a text editor. Inside this file is a readme section that includes instructions for customization. You can also refer to The Less Styles System for additional information.
You can change the name of the theme inside the theme.less
file to create a new theme, if desired. Name your new theme with alphanumeric characters. Any other character types are stripped out when you import. Additionally, you can rename the theme.less
file to suit your local file system organization. This file name has no bearing on the import process.
Once you have finished making your changes, click "Import Theme." You can browse to locate the theme.less
file, or you can drag the file to the Import Theme Less File dialog. The name of the selected file is displayed for your verification. Click "Upload."
The file is imported, compiled and then applied to the survey. The customize panel opens, if required. When customizations are complete, click "Save."
If you want to change the theme of the theme, click the "Save" button,
- This SurveyOnly - Only for this project
- My Themes - Only for your use
- Company Themes - To anyone in the company
If the .
less
file has syntax errors it will not be compiled or applied to the survey. In this case, an error message displays the error that needs fixing. Afterwards, you can upload the .
less
file again.