Skip to main content

Decipher Support

All the topics, resources needed for Decipher.

FocusVision Knowledge Base

Including CSS in a Survey

This document outlines the different ways that you can add CSS to a survey.

Overview

Additional CSS can be included in Decipher surveys to customize their overall look and feel. Custom CSS can implemented using either survey style attributes or the XML style system.

If you're new to CSS or would like to learn more, you can find a variety of free coding tutorials at Codecademy.com.

1:  Survey Style Attributes

There are two survey style attributes that allow you to include CSS in a survey: ss:customCSS and ss:includeCSS.

1.1:  Using ss:customCSS

To apply CSS contained in a single .css file, upload that file to the survey's static directory and then load it by adding the ss:customCSS attribute in the main <survey> element.

For example, if the stylesheet uploaded to the static directory is named customStyle.css, you can specify  ss:customCSS="customStyle" in the <survey> tag to load the file in the survey.

1.2:  Using ss:includeCSS

You can use the ss:includeCSS attribute to load multiple .css files. These files can be located in your local static directory, a client-level directory, or loaded externally. When using the ss:includeCSS attribute, include each .css file in a comma-delimited list.

For example, to load two CSS files (style1 and style2) into a survey, you can add the following to the <survey> tag:

ss:includeCSS="/survey/selfserve/9d3/proj1234/style1.css, proj1235/style2.css"

2:  XML Style System

Using the XML Style System, you can add CSS to one or more pages of a survey using either the respview.client.css style, or the question.after style.

2.1:  Using the respview.client.css Style

Inside the respview.client.css style, specify the CSS code as follows:

<style name="respview.client.css">
 <![CDATA[
   <style type="text/css">
#btn_continue {
   color: blue;
}
   </style>
 ]]>
</style>

To apply this to only specific pages, you can use the with argument to specify the questions the code would run with in a comma-delimited list. You can use this style to link external CSS files as well, similarly to how they would be linked in HTML:

<style name="respview.client.css">
 <![CDATA[
   <link rel="stylesheet" href="[rel customStyle.css]" type="text/css" charset="utf-8"/>
 ]]>
</style>

2.2:  Using the question.after Style

Similar to respview.client.css, CSS code can also be defined using the question.after style nested within a question. Styles applied within a question.after style tag will only apply to that question.

An example of a question.after style is listed below:

<style name="question.after">
 <![CDATA[
   <style type="text/css">
.question-text {
   color: blue;
   font-size: 24px;
}
   </style>
 ]]>
</style>
  • Was this article helpful?