Skip to main content

FV Decipher Support

All the topics, resources needed for FV Decipher.

 
FocusVision Knowledge Base

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 have 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 themes, from the project page in the research hub click 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 (themes available only in this project)
  • My Themes (themes that are available only to you)
  • Company Themes (themes that are available to people in your company)
  • System Themes (themes built into Decipher)

The preview provides details on 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. When you select a theme, the box around the theme will be highlighted and two additional buttons will be displayed:  "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 different preview options to see the theme applied in different ways. 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 - available within mobile device views only:

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 controls available in the theme editor or programmatically using the theme XML attribute. 

4.1:  Applying a Theme Through the User Interface

After you have viewed a theme and you want to apply the theme to the survey, click "Apply to Survey".  A confirmation box displays. 

The applied theme moves to the top of list of available themes and displays as the current theme.

4.2:  Applying a Theme Programmatically

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're using a theme.less file make sure to add it via theme="survey" or rename it to something other than theme.less if you're using ss:includeLESS, otherwise your theme.less file will be overwritten and will be lost when setting your survey live.

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 to static/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 theme 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 recorded after the colon. When a survey is taken live, 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 essentially the same behavior as theme="survey", except it was set through an automated process and the original theme can be quickly determined just by looking at the attribute.
  • 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 viewed a theme or applied a theme and you want to customize it, click "Customize". A customize panel for the theme displays 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, and they are often assigned to different elements within different themes. You can view the changes in the preview pane to the right of the theme editor to determine which tile applies to what specific element in a selected theme. 

Click on any color tile to open the color picker and customize its color. After you have selected a color for customization or entered the html color code, click "Choose". The changes are immediately applied 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: When customizing a theme with the user interface, you can export the theme.less file with the new changes without having to save them first.

Click "Save" to save the customizations or click "Save and Apply" to save the customizations and apply it to the opened survey.  

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 Programmatically

Customizing a theme programmatically gives you fine control over the look of a theme. 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 system according to your browser's settings. 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 alpha numeric 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 for you to make further edits, if required.  When customizations are complete, click "Save."

If you made changes to the theme name (at the top of the file), when you click "Save" from the customize panel, the new theme dialog opens for you to specify the theme availability:

  • This Survey Only - 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 won't be able to 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.

  • Was this article helpful?