Skip to main content

FV Kinesis Support

All the topics, resources needed for FV Kinesis.

FocusVision Knowledge Base

Themes Manager (Survey)

The Powerpoint Theme section of this article is under development.

Survey Themes are HTML templates that define how each survey looks and feels. A theme consists of template.html template file and cascading stylesheet file stylesheet.css. Naming conventions are strict. When used together you can create even the most demanding and appealing survey themes to match your client's look and feel. Survey themes across the entire install can be created or modified under Survey functions >> Theme Manager.

1:  General

The following actions are available:

td>Edit the theme HTML (template.html) using the WYSIWYG editor

Preview the web version of the theme. Can select to preview with demo or actual survey
Preview the mobile version of the theme in a simulated mobile device. Can select to preview with demo or actual survey
Edit the theme CSS (stylesheet.css)
Upload or manage theme related files
Copy theme
Click to download theme into a zip file.

The current selected theme in use for this survey is highlighted with a green row. Click on the title of a non-active theme to select it. Hovering over the  icon will list all surveys currently using this theme.

2:  Currently Available Survey Themes

This section lists all available uploaded and default survey themes. The currently selected theme in use for this survey is highlighted with a green row. Click on the title of a non-active theme to select it.

3:  Abbreviations

  • PB - Progress bar (where progress bar will be printed when enabled in the survey properties)
  • SP - Survey page (this is the area when survey questions will be printed)
  • ER - Error messages (where user error messages are printed)
  • AR - Anytime restart button
  • CO - Continue button
  • BA - Back button

4:  Substitution Variables

Each theme may (but is not required to) contain 4 substitution variables. When you create a theme you need to place these substitution variables in the template.html file. When the survey is rendered to the browser these variables are replaced with active survey components which each variable name presents.

  • %PROGRESSBAR% is replaced with progressbar + percentage indicator if turned on (default) in survey properties. 

Note, the Progress Bar feature has changed in Survey 5.8 and now uses CSS formatting. You can edit the look and feel of the progress bar in the Theme manager. Click on the CSS button of your theme and edit the ".progressbarbox" class.

  • %SURVEYPAGE% is replaced with active survey region (questions)
  • %ERRORS% is replaced with error messages
  • %CONTINUE% is replaced with continue buttons
  • %BACK% is replaced with back button (when enabled in survey properties)
  • %BUTTONS% is same as specifying both %CONTINUE% and %BACK% and represents both continue and back button
  • %ANYTIMERESTART% is replaced with anytime restart button (when enabled in survey properties)

You should always use all substitution variables in your template. You may use substitution variables only once in each template. The purpose for the substitution variables is to allow the template designer to freely place different survey components so that it best suits the design.

5:  Uploading New Themes

New themes can be uploaded by clicking Upload New Theme button. Please follow context help when uploading a theme. See creating themes below for how to create a theme from scratch.

6:  Creating New Themes

New themes can be created by using any HTML editor or simply coding them in HTML by using any text editor. Regardless of the way you intend to create a new theme there are couple of requirements.

  • Keep images and other files your theme depends on in the same folder as HTML file
  • Use relative links to the images, stylesheet files and other files
  • Your template file has to be called template.html (small case)
  • Your stylesheet file has to be called stylesheet.css
  • Your theme must contain all substitution variables (see above)

When you are ready, verify from the HTML source that all links are relative. Also, remember to specify TARGET tag if you have links pointing outside Kinesis Survey to prevent a linked site from opening in the same window as the survey.

7:  Deprecated Themes

If you created a theme that was highly customized prior to v5.8 chances are your theme will be marked a Deprecated. Deprecated themes will need to be redesigned as they are not compatible with the CSS / HTML rules we have in place. Deprecated themes are marked with a red flag.

8:  Stylesheets

Kinesis Survey uses fixed stylesheet for all the survey elements. These style definitions control how certain survey elements like question text and table structures appear. Therefore, cut and paste the default style definitions from the Default template into your stylesheet. Then you can add your own custom styles and modify existing style definitions.

8.1:  Stylesheet Classes for Desktop Surveys

surveyareaframe
Defines style for the entire dynamic survey area substituted with %SURVEYPAGE% substitution variable
surveyarea
Is immediately inside surveyareaframe. All questions are printed in surveyarea
tablename
Controls the style for tablename (matrix or simple table)
tablerowodd
Controls style definition for odd (1,3,5 etc..) table rows headers. Default style includes shading with different color from even rows
tableroweven
Controls style definition for even (2,4,6 etc..) table rows headers. Default style includes shading with different color from even rows
tablecellodd
Controls style definition for odd (1,3,5 etc..) table rows cells (the rest of the row). Default style includes shading with different color from even rows
tablecelleven
Controls style definition for even (2,4,6 etc..) table rows cells (the rest of the row). Default style includes shading with different color from even rows
errorbox
Controls the style of the error box. Default style uses red border around the table
errormessage
Controls the style of the error box text
warningbox
Controls the style of the warning box that appears when "warn if answered empty" feature is turned on in the survey properties. Default warning box draws with yellow color
warningmessage
Defines style of the warning text appearing in the warning box
tableheading
Defines style for table headings
button
Defines style for all survey buttons (continue, back etc..)
tablemasterheading
Defines style for table master heading (the most top heading)
questiontable
All questions are draws in separate tables. This style controls the style of the table
questiontext
Controls how question texts are draw
questiontexttable
Every question text is drawn in invisible table (default). This class controls style of the questiontext table
questionlabel
If question numbering is enabled in survey properties this style controls how to the question numbers are drawn

8.2:  Stylesheet Classes for Wireless Surveys

headerbox
Controls the style of the header box which can contain a company logo.
footerbox
Controls the style of the footer area which usually contains copyright information.
surveyarea
This class is immediately inside surveyareaframe. All questions are printed in surveyarea.
questiontextbox
Contains the question text.
errorbox
Controls the style of the error box. Default style uses red border around the table.
errormessage
Controls the style of the error box text.
warningbox
Controls the style of the warning box that appears when "warn if answered empty" feature is turned on in the survey properties. Default warning box draws with yellow color.
warningmessage
Defines style of the warning text appearing in the warning box
button
Defines style for all survey buttons (continue, back etc..)

Kinesis Survey also recommends adding the following style to every template stylesheet.

BODY {<br>
margin:0;<br>
padding:0;<br>
}

This style ensures that dynamically positioned elements are rendered the same in all browsers including Mozilla, Firefox, Safari and Opera browsers.

8.3:  Theme Preview

8:4:  Web Class Mappings

The following images indicate how some of the stylesheet classes used in the "web" rendering of the survey are mapped to their respective elements.

8.4.1:  Basic question

8.4.2:  Matrix Table

8.4.3:  Card Sort

9:  Custom Themes Library

The following themes can be downloaded and either uploaded or copied directly into Kinesis Survey. They should be thoroughly tested across multiple browsers as changes may have been introduced depending on what version of Kinesis Survey you are currently running.

9.1:  Blue Theme

VIEW DEMO | DOWNLOAD ZIP
Tested in Kinesis Survey v5.3.1.6 Build 23114

9.2:  Light Blue Theme

VIEW DEMO | DOWNLOAD ZIP
Tested in Kinesis Survey v5.3.1.6 Build 23114

9.3:  Green Theme

VIEW DEMO | DOWNLOAD ZIP
Tested in Kinesis Survey v5.3.1.6 Build 23114

9:4:  Community-Themed Surveys

The following survey themes are designed to replicate the general layouts available in Kinesis Community Manager.

9.4.1:  Community Default

VIEW DEMO | DOWNLOAD TEMPLATE HTML

9.4.2:  Community Rounded Corners

VIEW DEMO | DOWNLOAD TEMPLATE HTML

9.4.3:  Community Sections

VIEW DEMO | DOWNLOAD TEMPLATE HTML

10:  Conditional Theming

The Kinesis Survey application currently allows for only one theme per survey. However, with the use of inline piping, it is possible to alter the theme based on an incoming URL parameter. This will only work for pages within an active survey session and excludes system info pages, such as "Invalid survey invitation" or "Language selection" pages. A "default" theme styling would still need to be applied for such pages.

One way of accomplishing this is to place conditional CSS styles embedded within the theme's HTML.

<style type="text/css"> 
~$IN_parameter=="value" ? "INSERT CONDITIONAL CSS" : ""~
</style>

For example, if the incoming "source" is equal to 2, you can change the question text color with the following code:

<style type="text/css">
~$IN_source==2 ? ".questiontext {color: #FF0000;}" : ""~
</style>

This same method can be used for adjusting the survey theme for right-to-left languages.

  • Was this article helpful?