Editing the Survey Theme

Zuletzt aktualisiert
Als PDF speichern

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 themeXML 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 themeXML attribute to the <survey>object in a project's XML to set the project's theme.The themeattribute accepts the Following values below (examples use company path selfserve/abcand survey path selfserve/abc/10000).

Important: If you are using a theme.lessfile, make sure you add it to it theme="survey"or rename it to something other than theme.lessif you're using it ss:includeLESS, otherwise your theme.lessfile 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 theme
name (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.lessfile to your browser. Then, using your text editor of choice, make changes to the theme using the available lessXML 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.lessfile 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.lessfile 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.lessfile 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.lessfile, 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 .lessfile 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 .lessfile again.