Page tree
Skip to end of metadata
Go to start of metadata

CSS Survey Parameters


CSS stands for Cascading Style Sheets which define how to display HTML elements.

Click here to view how CSS classes are represented within a survey:

BACKGROUNDForm/Survey background
#tablelogoForm/Survey logo table parameter
HTLOGOForm/Survey logo parameter
TABLEBCKGForm/Survey body table background
UPTABLERow of form/survey name - 'tr' parameter
H1Form/Survey name parameters - 'td' parameter
H10Form/Survey text description
H2Question text parameters
H22Text only (introduction and headings) parameters
H3Answer text parameters
H4Answer text parameters for rank scale question type
H4LEFTAnswer text parameters for rank scale question type left part
H4RIGHTAnswer text parameters for rank scale question type right part
H5Answer text parameters for left column of Compare One Against Another question type
H11Word 'or' between left and right columns of Compare One Against Another question type
H6Answer text parameters for right column of Compare One Against Another question type
H7,H8,H9
H12-H21
Title text parameters for rank scale question type Example:
3 columns: 7-8-9
4 columns: 7-12-13-9
5 columns: 7-12-8-13-9
6 columns: 7-12-14-15-13-9
7 columns: 7-12-14-8-15-13-9
8 columns: 7-12-14-16-17-15-13-9
9 columns: 7-12-14-16-8-17-15-13-9
10 columns: 7-12-14-16-18-19-17-15-13-9
11 columns: 7-12-14-16-18-8-19-17-15-13-9
12 columns: 7-12-14-16-18-20-21-19-17-15-13-9
HHeaderForm/Survey Header text parameter
H1nameForm/Survey Name text parameter if survey contains Survey Header
HFooterForm/Survey Footer text parameter
ODDBackground of odd lines of answer text parameters
EVENBackground of even lines of answer text parameters
ODD_BARBackground of incompleted part of the form/survey progress bar.
EVEN_BAR fontColor of completed part of the survey progress bar.
ERROR_MESSAGEError message parameters
HAND

Cursor parameters

Example: .Hand {cursor: hand; border-style: none}

HEADING td,HEADING th, HEADING Heading answers text parameters
H23Text Page x of y parameters
H24Print Preview Mode: respondent text parameters
H25Total column in numeric allocation
HRG3D3D Matrix column elements parameter
HBUTTONSForm/Survey buttons parameter
htmlButtonHTML buttons parameter
htmlButton:hoverHTML buttons hover parameter
a, a:link, a:visitedLink text parameter
a:hoverLink hover text parameter
cRadioStyle of radio buttons
cCheckboxStyle of check boxes
inputSingleLine
inputNumericAllocation
inputNumericAllocationTotal
input3DH7
input3DH8
input3DH9
input3DH11
input3DH12
input3DH13
input3DH14
input3DH15
input3DH16
input3DH17
input3DH18
input3DH19
input3DH20
input3DH21
input3DH23
input3DH24
input3DH25
inputPickOneOther
inputCheckAllOther
inputPickOneComment
Text fields parameters for appropriate question type
textareaMultiLineMultiline fields parameter
FormSelectBoxDropdown fields parameter
.TYP_main
#TYPbackground
#TYPtablebckg
#TYPuptable
#TYPH1
#TYPbody
#TYPtblAnswer
#TYPODD
#TYPH3
Thank You page parameters.
.WBP_main
#WBPbackground
#WBPtablebckg
#WBPuptable
#WBPH1
#WBPbody
#WBPtblAnswer
#WBPODD
#WBPH3
Welcome Back page parameters.


Click 
Back to go back to the previous page.

To restore the default settings, click the Default button.

PreviewNextApplyFinish and Cancel buttons speak for themselves. The Default button resets a custom theme applied along with any additional CSS code changes to the default layout.

 

  • Sometimes the CSS changes may not be reflected right away due to a browser caching. Try clicking "Ctrl + F5" ("Command + Shift + R" on Mac) to refresh the page omitting cache.
  • The rank scale question type refers to both Rate Different Items and 3D Matrix question types. Changing appropriate styles will be applied to both of the question types in your survey.
  • By default the Thank You page and Welcome Back page design inherit the design applied to your survey. To change particular elements of both pages use the CSS provided in the table above.

CSS Survey Structure

CSS Use Cases

This set of topics will show you some survey appearance problems that may arise when you design a survey,and use cases how these problems can be resolved by means of CSS. We will work with different question types such as Single-Line3D MatrixPick One or OtherRate Different ItemsMultiline.

When you design survey appearance using CSS, you can refer to particular CSS classes and apply changes to the bunch of questions of particular type. Another option is to refer to a certain survey element such as question, answer choice, footer and many others, and change element appearance only. More details on the available classes you can find here.

To refer to the particular survey question use the following code #questionMainTableIdXXXXXXX, where XXXXXX is unique question identifier. This unique ID can be found in the source code of the previewed survey or by means of different browser's built-in plugins, such as Developer Tools for Microsoft's Internet Explorer, Safari Source for Apple's Safari, FireBug for Mozilla's FireFox and others.

Here are the examples of custom design editing:

 

  1. Use Case 1 - Single-Line question appearance, the position of the input text fields.
  2. Use Case 2 - Pick One or Other question with across answer choices position.
  3. Use Case 3 - Horizontal and vertical appearance of the 3D Matrix question items.
  4. Use Case 4 - Scale items font size for the 3D Matrix and Rate Different Items types of question.
  5. Use Case 5 - Other and Comment fields customization for Pick One or Other and Pick One with Comment questions.
  6. Use Case 6 - The modification of slider colors.
  7. Use Case 7 - Changing form/survey background color.
  8. Use Case 8 - Changing font size of answers typed in open-ended fields (Single line, Multiline).

  9. Use Case 9 - Adding a new font to the Form/Survey.

Sometimes the CSS changes may not be reflected right away due to a browser caching. Try clicking "Ctrl + F5" ("Command + Shift + R" on Mac) to refresh the page omitting cache.