CSS Styles

The following table outlines the CSS (Cascading Style Sheet) classes that are used when surveys are rendered and displayed on a webpage. CSS classes are used by web developers to control the look and feel of elements within a web page. Anything from colour and font to page position can be configured using CSS.

These can be edited either directly in the template, or a subset can be overridden by configuring a Survey's Question Design.

Class	Where it is used
tpSurveyItem	The div containing all the elements for each Survey question.
tpSurveyIndex	The div containing question numbers.
tpSurveyContent	The div containing the content of a Survey question, excluding the question number.
tpSurveyQuestion	The span containing question text.
tpSurveyRequired	The span containing the asterisk character (*) denoting that a Survey question is required.
tpSurveyAbstract	The span containing a question's HTML abstract.
tpSurveyCommentLabel	The span containing the label for a question's comments field.
tpSurveyProgress	The div containing all the progress bar elements. Including the progress text. For example, 50% or Page 2 of 3.
tpSurveyProgressMeter	The div containing the progress bar meter. By default this is configured with a 1 px solid gray border. The tpSurveyProgressBar div is a child of this div.
tpSurveyProgressBar	The div containing the actual progress bar displaying the current progress in the survey. This div has an inline style attribute automatically added by the Touchpoint Interactive Marketing Platform. For example, style="width:50%;"
tpSurveyButtons	The div containing all buttons for a Survey page.
tpSurveyButton	The input tag for all button types.
tpSurveyButtonPrevious	The input tag for buttons of type "previous".
tpSurveyButtonStart	The input tag for buttons of type "Start" - displayed after an introduction page.
tpSurveyButtonNext	The input tag for buttons of type "next".
tpSurveyButtonSubmit	The input tag for buttons of type "submit".
tpSurveyOptions	The table containing the options for a select or matrix question. The div containing the input tag for other question types.
tpSurveySeparator	The div used as a separator between Survey questions. The configuration options entered on the Content view of the survey are added as an inline style attribute.
tpSurveyPageSeparator	This div used in preview output to indicate a page break.
tpSurveyOptionFormat	The font tag describing the input format for a survey question. For example, a Date question containing the text DD/MM/YYYY.
tpSurveyDate	The div containing all the elements for each Date question.
tpSurveyPhone	The div containing all the elements for each Phone question.
tpSurveyText	The div containing all the elements for each Text question.
tpSurveySelect	The div containing all the elements for each Select question.
tpSurveyOtherSelectList	The div containing the Other option input text box for a Select list, when the layout is set to Select List.
tpSurveyMatrix .tpSurveyOptions	The div containing all the elements for each Matrix question.
tpSurveyCategories	On the tbody tag containing the categories for Matrix questions.
tpSurveyResponses	On the colgroup tag containing the titles response options for Matrix questions.
tpSurveyPhone .country	The input tag for the country code of Phone questions.
tpSurveyPhone .area	The input tag for the area code of Phone questions.
tpSurveyPhone .local	The input tag for the local number of Phone questions.
tpSurveyDate .datetime	The span containing the table with three input boxes for a Date question when a Format Layout of 3 Fields is specified.
tpSurveyDate .day	The input tag of a day field for a Date question when a Format Layout of 3 Fields is specified.
tpSurveyDate .month	The input tag of a month field for a Date question when a Format Layout of 3 Fields is specified.
tpSurveyDate .year	The input tag of a year field for a Date question when a Format Layout of 3 Fields is specified.

This table covers most CSS classes, but is not a complete list.

CSS Styles

See Also