Zu Hauptinhalten wechseln

FV Decipher Unterstützung

Alle Themen, Ressourcen für FV Decipher benötigt.

 
decipher

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.

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>
  • War dieser Artikel hilfreich?