CSS Survey Parameters
Click here to view how CSS classes are represented within a survey:
| BACKGROUND | Form/Survey background |
|---|---|
| #tablelogo | Form/Survey logo table parameter |
| HTLOGO | Form/Survey logo parameter |
| TABLEBCKG | Form/Survey body table background |
| UPTABLE | Row of form/survey name - 'tr' parameter |
| H1 | Form/Survey name parameters - 'td' parameter |
| H10 | Form/Survey text description |
| H2 | Question text parameters |
| H22 | Text only (introduction and headings) parameters |
| H3 | Answer text parameters |
| H4 | Answer text parameters for rank scale question type |
| H4LEFT | Answer text parameters for rank scale question type left part |
| H4RIGHT | Answer text parameters for rank scale question type right part |
| H5 | Answer text parameters for left column of Compare One Against Another question type |
| H11 | Word 'or' between left and right columns of Compare One Against Another question type |
| H6 | Answer 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 |
| HHeader | Form/Survey Header text parameter |
| H1name | Form/Survey Name text parameter if survey contains Survey Header |
| HFooter | Form/Survey Footer text parameter |
| ODD | Background of odd lines of answer text parameters |
| EVEN | Background of even lines of answer text parameters |
| ODD_BAR | Background of incompleted part of the form/survey progress bar. |
| EVEN_BAR font | Color of completed part of the survey progress bar. |
| ERROR_MESSAGE | Error message parameters |
| HAND | Cursor parameters Example: .Hand {cursor: hand; border-style: none} |
| HEADING td,HEADING th, HEADING | Heading answers text parameters |
| H23 | Text Page x of y parameters |
| H24 | Print Preview Mode: respondent text parameters |
| H25 | Total column in numeric allocation |
| HRG3D | 3D Matrix column elements parameter |
| HBUTTONS | Form/Survey buttons parameter |
| htmlButton | HTML buttons parameter |
| htmlButton:hover | HTML buttons hover parameter |
| a, a:link, a:visited | Link text parameter |
| a:hover | Link hover text parameter |
| cRadio | Style of radio buttons |
| cCheckbox | Style 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 |
| textareaMultiLine | Multiline fields parameter |
| FormSelectBox | Dropdown 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.
Preview, Next, Apply, Finish 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-Line, 3D Matrix, Pick One or Other, Rate Different Items, Multiline.
To access the CSS editing panel, go to the Layout page when viewing the form, click the Edit button underneath the preview section and go to the CSS tab to make changes in the form.
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:
- Use Case 1 - Single-Line question appearance, the position of the input text fields.
- Use Case 2 - Pick One or Other question with across answer choices position.
- Use Case 3 - Horizontal and vertical appearance of the 3D Matrix question items.
- Use Case 4 - Scale items font size for the 3D Matrix and Rate Different Items types of question.
- Use Case 5 - Other and Comment fields customization for Pick One or Other and Pick One with Comment questions.
- Use Case 6 - The modification of slider colors.
- Use Case 7 - Changing form/survey background color.
Use Case 8 - Changing font size of answers typed in open-ended fields (Single line, Multiline).
- 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.