Overview
This guide describes and explains how to change the default survey display using a customized CSS file that will be uploaded
What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External style sheets are stored in CSS files
Steps
Navigate to the 'Custom Display' tab in the 'Survey Web Display Properties' - Navigate to the 'Styles' tab and choose the option 'Custom CSS' 
If you would like to use your own CSS file and not the default CSS, Click on the option 'Download Current CSS' to download the CSS currently implemented (attached to this guide you will find a template CSS)
Update the CSS file and click on 'Use A Custom CSS' and upload it
Please note:
- The CSS should only include classes and selectors that you wish to change, there is no need for the default CSS file to be included with all the classes.
- That if your CSS file will not include or update a certain element it will use the default.
- Once you upload your own CSS file it will override any changes done using the UI.
- Any new elements created in your CSS file will be ignored.
Inspect page Items
When testing the survey in the browser you can use the Inspect (F12) in order to find the name of the class you would like to change.
- Right Click on the section that you would like to find the class name and choose inspect - for example right click on the progress bar (as shown in image below)
- Once you click on inspect the class name will show as marked and it will navigate to it as well on the right side of the screen (F12 option that opened)
- Take the Class name - in this case it's 'stgProgressBarCell' and search for it in your CSS file to change or update it
Please Note: If you have a class name that you would like to see what it affects in the browser do the following:
- Click on F12 while the survey is showing in the browser
- Click on Ctrl+F to search and enter the class name - hit the enter
- Once the class is found hover with the mouse over the class and on the right side of the screen you will be able to see the section it will affect
Please Note:
- You can use SurveyToGo CSS Studio to view the CSS file and what it would look like unrelated to a specific survey, click here to learn how.
- There is no need to include all the classes in your customized CSS only those classes you would like to change.
STG CSS Elements
In the table below you will find the STG elements and their description which are available for use
| STG Element Name | Description |
| stgLinkButton | The link button of a single choice question that is rendered as links |
| stgTableContainer | Scrollable table with header fixed |
| stgScrolltable | Scrollable table with header fixed |
| stgScrollthead | Scrollabe table with header fixed |
| stgSurveyOuterTable | This table contains the survey inner table, all the brand controls - top, right, left, bottom, and the label version |
| stgSurveyInnerTable | This table contains the survey panel which contains- the progress bar, the navigation bar and the main questions table |
| stgLeftBrandControl | A span tag containing the left pane image of the survey's brand |
| stgRightBrandControl | A span tag containing the right pane image of the survey's brand |
| stgTopBrandControl | A span tag containing the left pane image of the survey's brand |
| stgSurveyFotter | A span tag containing the left pane image of the survey's brand |
| stgSurveyPanel | This panel contains the progress bar, the navigation bar(back button next button and page index) and the main questions table |
| stgSurveyPanelBorderLess | Used when not using custom CSS if the borderless survey property is enabled |
| stgProgressBarFilledCell | When progressing through the survey the progress bar is filled this table cell represents a filled step |
| stgProgressBarCell | When progressing through the survey the progress bar is filled this table cell represents a step which is not yet filled |
| stgTopBannerPanel | This panel is visible when displaying the survey's top panel (set in the survey properties and through the user logic) |
| stgTopBannerLabel | When displaying the survey's top banner this label will hold the top banner text |
| stgMainQuestionsTable | This table contains the navigation bar and the question displayed in the current page |
| stgMainQuestionsTableBorderless | This table contains the navigation bar and the question displayed in the current page |
| stgQuestionsTable | This table will contain all the current page questions it will contain more than one question if displaying more than one question per page |
| stgQuestionTable | This table will contain a single survey question |
| stgQuestionTableBorderless | This table will contain a single survey question |
| stgErrorLabel | This label will be visible if trying to advance from a question which is not filled correctly or does not meet the validation rule |
| stgNavigationTable | This table will contain all the visible navigation buttons - next, back (also home and end if they are displayed) and the page indicator label |
| stgNavigationBorderless | This table will contain all the visible navigation buttons - next, back (also home and end if they are displayed) and the page indicator label |
| stgNavButton | Survey navigation buttons (stgNavButton is the base class) |
| stgNextButton | Survey navigation buttons (stgNavButton is the base class) |
| stgBackButton | Survey navigation buttons (stgNavButton is the base class) |
| stgNextButtonFinish | Survey navigation buttons (stgNavButton is the base class) |
| stgEndButton | Survey navigation buttons (stgNavButton is the base class) |
| stgHomeButton | Survey navigation buttons (stgNavButton is the base class) |
| stgHelpLink | Displayed only when enabling the 'show help link' property through the web survey properties screen |
| stgPageIndexLabel | This label is placed inside stgNavigationTable it specifies the current displayed survey's page and the total number of pages in the survey |
| stgClearAnswerButton | Clear answer button - displayed only when enabling the option through the web survey properties screen |
| stgAnswersTable | This table will contain the question's answer and topics |
| stgShowBorder | This table will contain the question's answer and topics |
| stgVersionLabel | This label indicates the current Dooblo web client version |
| stgOtherSpecifyTextBox | If the question contains an answer which is set as an 'other-specify' answer a text box will be rendered along with the answer label, this class will be added to it |
| stgCommentTextBox | If the question is set to 'Allow comments' a text box will and a label with the text 'Add Comment Here:' will be rendered allowing the user to enter a comment, this class will be added to the text-box. |
| stgTextBox | A base class for all text box answers, for example used for answers in questions like - open ended, numeric open ended grid etc. |
| stgCommentLabel | If the question is set to 'Allow comments' a text box and a label with the text 'Add Comment Here:' will be rendered allowing the user to enter a comment, this class will be added to the label |
| stgOtherSpecifyGridCell | A base class for other specify answers in grid questions like single choice grid and multiple selection grid, this is the cell that will hold the radio button or check-box |
| stgCheckBox | A base class for answers that are represented by check boxes used in multiple selection questions like - multiple selection and multiple selection grid |
| stgRadioButton | Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid |
| stgSelectionBox | Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid |
| stgSelectionBoxItem | Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid |
| stgButton | Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid |
| stgGridHeaderRow | A base class for the header row in grid questions that are rendered as a table like single choice grid and multiple selection grid |
| stgGridHeaderRowFlip | A base class for the header row in grid questions that are rendered as a table like single choice grid and multiple selection grid |
| stgBeforeLabel | A base class for before and after labels used in questions that have a before and after text property like numeric, numeric grid, open ended etc. This label will hold the question's before and after text |
| stgAfterLabel | A base class for before and after labels used in questions that have a before and after text property like numeric, numeric grid, open ended etc. This label will hold the question's before and after text |
| stgRTL | This base class is added to controls when the current survey's language is set as an RTL language |
| stgTextAlignRight | This base class is added to controls when the current survey's language is set as an RTL language |
| stgLTR | This base class is added to controls when the current survey's language is set as an LTR language |
| stgTextAlignLeft | This base class is added to controls when the current survey's language is set as an LTR language |
| stgNavigationTableM | This class will set the navigation table width |
| stgGridTable | A base class for the grid table in grid questions that are rendered as table like single choice grid and multiple selection grid, this table will hold the header row, topics, answers and radio buttons or check-boxes |
| stgMGridTable | The same as stgGridTable but used when the survey is conducted on mobile devices |
| stgGridRow | A base class for a row in the grid table for grid questions that are rendered as table like single choice grid and multiple selection grid |
| stgGridRowAlter | A base class for a row in the grid table for grid questions that are rendered as table like single choice grid and multiple selection grid |
| stgHorizontalBorder | Added to rows inside stgMGridTable when the survey is conducted on mobile devices |
| stgMultiSelectCheckBox | When rendering a multiple selection question as selection list or auto-complete list each answer is rendered as a input taf with checkbox type, this class is added to each tag in addition to the stgCheckBox base class |
| stgMultiSelectAnswerLabel | For each visible answer a label tag will be created, this class is added to each tag in addition to the stgAnswerLabel base class |
| stgMultiSelectOtherSpecifyTextBox | If the question contains an answer which is set as an 'other-specify' answer an input tag will be rendered along with the answer span tag, this class will be added to it along with the stgOtherSpecifyTextBox base class |
| stgMultiSelectGridCheckBox | When rendering a multiple selection grid question as table each answer-topic cell will hold an input tag with a checkbox type, this class will be added to each tag |
| stgMultiSelectGridTable | When rendering a multiple selection grid question as table, this class will be added to the table which will contain all the topics, answers and check-boxes |
| stgMultiSelectGridRow | When rendering a multiple selection grid question as table, this class will be added to each table row |
| stgMultiSelectGridRowAlter | When rendering a multiple selection grid question as table and enabling the 'alternate row color', this class will be added to each alternating table row |
| stgMultiSelectGridAnswerLabel | For each visible answer a span tag will be created, this class will be added to each tag along with the stgAnswerLabel base class |
| stgMultiSelectGridTopicLabel | For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class |
| stgOtherSpecMultiSelectGridCell | For each answer that is set as 'Other specify' this class will be added to the cell with check-box representing the answer along with the stgOtherSpecifyGridCell base class |
| stgMultiSelectGridHeaderRow | When rendering a multiple selection grid question as table, this class will be added to table header row along with the stgGridHeaderRow class |
| stgMultiSelectGridHeaderRowFlip | When rendering a multiple selection grid quesiton as a flipped table, this class will be added to table header row along with the stgGridHeaderRowFlip class |
| stgSingleChoiceRadioButton | When rendering a single choice question as radio buttons each answer is rendered as an input tag with a radio type, this class is added to each tag in addition to the stgRadionButton base class |
| stgSingleChoiceAnswerLabel | For each visible question answer a label tag will be created, this class will be added to each tag along with the stgAnswerLabel base class |
| stgSingleChoiceOtherSpecifyTextBox | If the question contains an answer which is set as an 'other-specify' answer an input tag will be rendered along with the answer span, this class will be added to it along with the stgOtherSpecifyTextBox base class |
| stgSingleChoiceLinkButton | When rendering a single choice question as links each answer is rendered as an 'a' tag with an href property, this class is added to each tag in addition to the stgLinkButton base class |
| stgSingleChoiceLinkCloud | When rendering a single choice question as link clouds each answer is rendered as an 'a' tag with an href property, this class is added to each tag in addition to the stgLinkCloud base class |
| stgSingleChoiceLinkCloudSelected | When rendering a single choice question as link clouds each answer is rendered as an 'a' tag with an href property this class is added to each tag that represents a selected answer in addition to the stgLinkCloud base class |
| stgSingleChoiceComboSelectionBox | When rendering a single choice quesiton as selection box each answer is rendered as an option tag inside a select tag, this class is added to the select tag in addition to the stgSelectionBox base class |
| stgSingleChoiceComboSelectionBoxItem | When rendering a single choice quesiton as selection box each answer is rendered as an option tag inside a select tag, this class is added to each option tag in addition to the stgSelectionBoxItem base class |
| stgSingleChoiceGridHeaderRow | When rendering a single choice grid quesiton as table, this class will be added to table header row along with the stgGridHeaderRow class |
| stgSingleChoiceGridHeaderRowFlip | When rendering a single choice grid quesiton as a flipped table, this class will be added to table header row along with the stgGridHeaderRowFlip class |
| stgSingleChoiceGridRadioButton | When rendering a single choice grid question as table each answer-topic cell will hold a radio button, this class will be added to each one |
| stgSingleChoiceGridTable | When rendering a single choice grid question as table, this class will be added to the table which will contain all the topics, answers and radio buttons |
| stgSingleChoiceGridRow | When rendering a single choice grid question as table, this class will be added to each table row along with the stgGridRow base class |
| stgSingleChoiceGridRowAlter | When rendering a single choice grid question as table and enabling the 'alternate row color', this class will be added to each alternating table row along with the stgGridRowAlter base class |
| stgSingleChoiceGridAnswerLabel | For each visible answer a span tag will be created, this class will be added to each tag along with the stgAnswerLabel base class |
| stgSingleChoiceGridTopicLabel | For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class |
| stgSingleChoiceGridComboSelectionBox | When rendering a single choice grid question as selection box each topic is rendered as a select tag, this class is added to the tag in addition to the stgSelectionBox base class |
| stgSingleChoiceGridComboSelectionBoxItem | When rendering a single choice grid question as selection box each answer is rendered as an option tag inside a select tag, this class is added to each select tag in addition to the stgSelectionBoxItem base class |
| stgOtherSpecifySingleChoiceGridCell | For each answer that is set as 'Other specify' this class will be added to the cell with radio button representing the answer along with the stgOtherSpecifyGridCell base class |
| stgOpenEndedTextBox | The answer of the open ended question is rendered as an input tag, this class will be added to it along with the stgTextBox base class |
| stgOpenEndedGridTextBox | For each topic in an open ended grid question an input tag is rendered, this class will be added to it along with the stgTextBox base class |
| stgOpenEndedGridTopicLabel | For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class |
| stgOpenEndedGridRow | Each open ended grid topic span and it's input tag are placed inside a table row, this class will be added to each row along with the stgGridRow base class |
| stgOpenEndedGridRowAlter | If the question's 'alternate row color' property is set, this class will be added to each alternating table row along with the stgGridRowAlter base class |
| stgNumericTextBox | The answer of the numeric question is rendered as a text box, this class will be added to it along with the stgTextBox base class |
| stgNumericGridTextBox | For each topic in a numeric grid question an input tag is rendered, this class will be added to it along with the stgTextBox base class |
| stgNumericGridTotalLabel | If the question is set to 'Show Total', two spans will be added to indicate the topics total value, the value of this span will be the text set in the survey texts 'numeric grid total' property |
| stgNumericGridTotalValueLabel | If the question is set to 'Show Total', two spans will be added to indicate the topics total value, the value of this span will be the total value of all the topics |
| stgNumericGridRemainLabel | If the question's 'Topics should no exceed' property is enabled, two spans will be added, the value of this span will be 'Remaining: |
| stgNumericGridRemainValueLabel | If the question's 'Topics should no exceed' property is enabled, two spans will be added, the value of the span will be the the value which is set as the should not exceed value, minus, the total value of each of topic value |
| stgNumericGridRow | Each numeric grid topic and it's input tag are placed inside a table row, this class will be added to each row along with the stgGridRow base class |
| stgNumericGridRowAlter | If the question's 'alternate row color' property is set, this class will be added to each alternating table row along with the stgGridRowAlter base class |
| stgNumericGridTopicLabel | For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class |
| stgDateTimeTextBox | The answer of the numeric question is rendered as an input tag with a date or time mode, this class will be added to it along with the stgTextBox base class |
| stgDateTimeCheckBox | In a date time question an input tag with a checkbox type is rendered, which will be marked by the user to indicate that he answered the question |
| stgDateTimeNowButton | If the question's 'no button' property is disabled this button tag will be added, clicking on it will set the stgDateTimeTextBox to current browser date or time and also will check the stgDateTimeCheckBox |
| stgMatrixRadioButton | For each topic and each step between the question's lower limit and upper limit an input tag with a radio type will be rendered |
| stgMatrixIrrelevantRadioButton | If displaying the 'Irrelevant' column this input tag with a radio type will be added to each column step between the question's lower limit and upper limit |
| stgMatrixIrrelevantHeaderLabel | If displaying the 'Irrelevant' column another column will be added to the grid this span tag will hold the the value set as the column's text in the question |
| stgMatrixTopicLabel | For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class |
| stgMatrixLowLabel | A span tag holding the question's lower text |
| stgMatrixHighLabel | stgMatrixHighLabel |
| stgMatrixGridRow | This class will be added to each grid row along with the stgGridRow base class |
| stgMatrixGridRowAlter | If the question's 'alternate row color' property is set, this class will be added to each alternating table row along with the stgGridRowAlter base class |
| stgMatrixHeaderRow | This row holds the lower, upper and irrelevant(if displayed) texts, this class will be added to the row along with the stgGridHeaderRow class |
| stgMatrixHeaderRowFlip | When the question's 'flipped scale' property is enabled, this class will be added to table header row along with the stgGridHeaderRowFlip class |
| stgScaleRadioButton | For each scale step an input tag with radio type will be rendered, this class will added to it along with the stgRadioButton base class |
| stgScaleGridTable | This class will be added to the table which will contain the lower and upper texts and the radio buttons |
| stgScaleGridRow | This class will be added to each table row |
| stgScaleNumbersRow | This class will be added to the row which will contain the scale step values |
| stgScaleHeaderRow | This class will be added to the table header row |
| stgListSourceCheckBox | The check box element of an external list question when rendered as multiple selection |
| stgListSourceRadioButton | The check box element of an external list question when rendered as Single selection |
| stgListSourceAnswerLabel | External list question answer label |
| stgOtherSpecifyPopUp | The Popup window to be shown when Other Specify window is prompt for Grid Questions |
| stgOtherSpecifyPopUpContent | |
| stgOtherSpecifyPopUpHeader | The header of the Grid Other Specify PopUp window |
| stgOtherSpecifyPopUpFooter | The Footer of the Grid Other Specify PopUp window |
| stgOtherSpecifyPopUpCloseButton | The Close button of the Grid Other Specify PopUp window |
| stgOtherSpecifyPopUpBody | The popup body – the white part between the header and the part with the accept button of the Grid Other Specify PopUp window |
| stgOtherSpecifyPopUpBodyText | The text area of the Grid Other Specify PopUp window |
| stgOtherSpecifyPopUpAcceptButton | The accept button of the Grid Other Specify PopUp window |
| stgFinishPageMainTable | This table contains the Finish page layout |
| stgFinishPageInner | This table contains the Finish page inner table layout |
| stgCompoundGridTable | This table contains the layout of the Compound Grid |
| stgCompoundGridTableBorderLess | This table contains the layout of the Compound Grid borderless survey property is enabled |
| stgCompoundGridHeaderLabel | This table contains the layout of the Header Label in a Compound Grid |
| stgMinimumSpaces | Used when the minimum spaces option is enabled |
| stgQuestionInstructionText | Class responsible for the 'Surveyor Instructions' layout |
| stgCheckBoxHighLightBorder | A class to be used when using the render 'Highlighted Border' in Multiple Selection |
| stgRadioButtonHighLightBorder | A class to be used when using the render 'Highlighted Border' in single choice |
| stgAnswerLabelHighLightBorder | A class to be used to design the Answer label in 'Highlighted Border' render mode |
| stgMultiSelectAnswerLabelHighLightBorder | A class to be used to design the Answer label in Multiple Selection Question rendered as 'Highlighted Border' |
| stgTextHighlightLabel | A class to be used to design the label in highlighted Text render mode |
| stgSingleChoiceAnswerLabelHighLightBorder | A class to be used to design the label in Single Choice highlighted border render mode |
|
stgSingleChoiceGridTopicLabelTwoStatmentsRightAlignSecondStatment |
A class to be used to design Single Choice Grid 2 Statements render mode |
| stgMultimediaDropZone | a class to design the Multimedia 'DropZone' after attachments are included |
| stgMultimediaDropZoneM | Same as 'stgMultimediaDropZoneM' but used when the survey is conducted on mobile devices |
| stgMultimediaDropZoneNoAttach | a class to design the Multimedia 'DropZone' when no attachments are included |
| stgMultimediaHighlight | a class to design how the highlighted areas will look like |
| stgMultimediaDropFileLabel | A class to design Multimedia Question File label |
| stgMultimediaClearFileButton | A class to design Multimedia Question 'Clear' Button, this is the button prior to adding a file |
| stgMultimediaUpload | A class to design the Multimedia Question upload area |
| stgMultimediaPreviewAddFileButton | A class to design Multimedia Question 'Preview File' Button |
| stgMultimediaErrorLabel | A class to design Multimedia Question Error label |
| stgMultimediaMediaPlayer | A class to design Multimedia Question Media player container, will be used after loading a video or audio file |
| stgMultimediaImageGallery | A class to design Multimedia Question Image Gallery container |
| stgMultimediaMediaPlayerM | Same as 'stgMultimediaMediaPlayer' but used when the survey is conducted on mobile devices |
| stgMultimediaImageGalleryM | Same as 'stgMultimediaImageGallery' but used when the survey is conducted on mobile devices |
| stgMultimediaControls | A class to design the Multimedia Question controls |
| stgMultimediaClearButton | A class to design Multimedia Question 'Clear' Button, this is the button after a file is added |
| stgMultimediaAddButton | A class to design Multimedia Question 'Add File' Button |
| stgScaleSliderContainer | class to define the layout of a 'Scale' Question slider container |
| stgScaleSlider | class to define the layout of a 'Scale' Question slider |
| stgScaleCheckBox | class to define the layout of a 'Scale' Question check box |
| stgScaleTextsContainer | class to define the layout of a 'Scale' Question texts container |
| stgScaleImageContainer | class to define the layout of a 'Scale' Question images container |
| stgScaleLowImage | class to define the layout of a 'Scale' Question Low Image |
| stgScaleLowText | class to define the layout of a 'Scale' Question Low Text |
| stgScaleUpperText | class to define the layout of a 'Scale' Question Upper text |
| stgScaleMidText | class to define the layout of a 'Scale' Question Middle Text |
| stgScaleMidImage | class to define the layout of a 'Scale' Question Middle Image |
| stgScaleUpperImage | class to define the layout of a 'Scale' Question Upper Image |
| stgScaleAboveImage | Class to define the layout of a 'Scale' Question Above Image |
| stgScaleCurrentContainer | Class to define the layout of a 'Scale' Question selected container |
| stgScaleCurrentRateLabel | Class to define the layout of a 'Scale' Question selected rate label |
| stgScaleCurrentRateLabelValue | Class to define the layout of a 'Scale' Question selected rate label value |
| stgCountersTotalImages | class to define the layout of the 'Counter' Question Total Images when used |
| stgCountersTable | class to define the layout of the 'Counter' Question table container |
| stgCountersRow | class to define the layout of the 'Counter' Question Row |
| stgCountersText | class to define the layout of the 'Counter' Question Text |
| stgCountersLabel | class to define the layout of the 'Counter' Question label |
| stgCountersUpButton | class to define the layout of the 'Counter' Question UP (Increase) button |
| stgCountersDownButton | class to define the layout of the 'Counter' Question DOWN (Decrease) button |
| stgCountersResetButton | class to define the layout of the 'Counter' Question Reset button |
| stgCountersTopicLabel | class to define the layout of the 'Counter' Question Topic Label |
| stgCountersSmallButton | class to define the layout of the 'Counter' Question when small button is used |
| stgCountersSmallText | class to define the layout of the 'Counter' Question when small text is used |
| stgCountersTotalLabel | class to define the layout of the 'Counter' Question Totals label when used |
| stgCountersTotalValueLabel | class to define the layout of the 'Counter' Question Totals Value label when used |
| stgCountersRowAlter | class to define the alter row layout in a 'Counter' question. |
| stgRatingAnswerLabel | Class to define the layout of a 'Rating' question Answer Label |
| stgRatingRemoveButton | Class to define the layout of a 'Rating' question Remove button |
| stgRatingRatingIndex | Class to define the layout of a 'Rating' question Index |
| stgRatingDropZone | Class to define the layout of a 'Rating' question Drop Zone |
| stgRatingDropZoneM | Same as 'stgRatingDropZone' but used when the survey is conducted on mobile devices |
| stgRatingDropZoneTable | Class to define the layout of a 'Rating' question specific Drop Zone Table container |
| stgRatingDropZoneTableM | Same as 'stgRatingDropZoneTable' but used when the survey is conducted on mobile devices |
| stgRatingAnswersTable | Class to define the layout of a 'Rating' question Answers table container |
| stgRatingDropZonesTable | Class to define the layout of a 'Rating' question multiple Drop Zones table |
| stgRatingAnswersTableM | Same as 'stgRatingAnswersTable' but used when the survey is conducted on mobile devices |
| stgRatingDropZonesTableM | Same as 'stgRatingDropZonesTable' but used when the survey is conducted on mobile devices |
| stgMultiChoiceGridDropZone | Class to define the layout of a 'Multiple Choice Grid' question specific Drop Zone Table container |
| stgMultiChoiceGridDropZones | Class to define the layout of a 'Multiple Choice Grid' question multiple Drop Zones Table container |
| stgMultiChoiceGridTopicsList | Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' topics list |
| stgMultiChoiceGridDropList | Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' drop list |
| stgMultiChoiceGridDropListM | Same as 'stgMultiChoiceGridDropList' but used when the survey is conducted on mobile devices |
| stgMultiChoiceDropGridListM | Same as 'stgRatingAnswersTableM' but used when the survey is conducted on mobile devices |
| unselectableText | Class to define the Rank Scale Topic that is un-selectable. |
| stgMultiChoiceGridTopicsList | Class to define 'Multi Choice Grid' Question topics list |
| stgCountersNeutralColors | class to define a 'Counter' Question buttons |
| stgScrolltheadSticky | class to define a 'Multi Topic Grid' when freezing the header |
| stgTopicLabelBold | Class to define a topic label when set as bold |
| stgAnswerLabelBold | Class to define an Answer label when set as bold |
| stgSliderTicks | class to define a 'Slider' when ticked |
| stgSliderCheck | class to define a 'Slider' when checked |
| stgSliderContainer | class to define a 'Slider' container |
| stgSlider | class to define the 'Slider' |
| stgSliderEdge | class to define the 'Slider' Edges |
| stgSliderValue | class to define the 'Slider' values |
| stgSliderValueNotSelectable | class to define the 'Slider' values that were not selected |
| stgSliderValueImageHolder | class to define the 'Slider' values Image holder |
| stgSliderValueImage | class to define the 'Slider' values Image |
| stgSingleChoiceSliderTicks | class to define a Single Choice Question rendered as 'Slider' when ticked |
| stgSingleChoiceSliderCheck | class to define a Single Choice Question rendered as 'Slider' when checked |
| stgSingleChoceSliderContainer | class to define a Single Choice Question rendered as 'Slider' container |
| stgSingleChoiceSlider | class to define a Single Choice Question rendered as 'Slider' |
| stgSingleChoiceSliderEdge | class to define a Single Choice Question rendered as 'Slider' Edges |
| stgSingleChoiceSliderValue | class to define a Single Choice Question rendered as 'Slider' values |
| stgSingleChoiceSliderValueImageHolder | class to define a Single Choice Question rendered as 'Slider' values Image holder |
| stgSingleChoiceSliderValueImage | class to define a Single Choice Question rendered as 'Slider' values Image |
| stgSingleChoiceGridTopicsList | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' topics list |
| stgSingleChoiceGridDropZone | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zone |
| stgSingleChoiceGridDropZones | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zones |
| stgSingleChoiceGridDropList | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop list |
| stgSingleChoiceGridAnswerDivM | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' Answer surrounding div when running on a mobile device |
| stgSingleChoiceGridDropZoneDivM | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zone surrounding div when running on a mobile device |
| stgSingleChoiceGridDropListM | Same as 'stgSingleChoiceGridDropList' but used when the survey is conducted on mobile devices |
| stgSingleChoiceGridSliderTicks | class to define a Single Choice Grid Question rendered as 'Slider' when ticked |
| stgSingleChoiceGridSliderCheck | class to define a Single Choice Grid Question rendered as 'Slider' when checked |
| stgSingleChoiceGridSliderContainer | class to define a Single Choice Grid Question rendered as 'Slider' container |
| stgSingleChoiceGridSlider | class to define a Single Choice Grid Question rendered as 'Slider' |
| stgSingleChoiceGridSliderEdge | class to define a Single Choice Grid Question rendered as 'Slider' Edges |
| stgSingleChoiceGridSliderValue | class to define a Single Choice Grid Question rendered as 'Slider' values |
| stgSingleChoiceGridSliderValueImageHolder | class to define a Single Choice Grid Question rendered as 'Slider' values Image holder |
| stgSingleChoiceGridSliderValueImage | class to define a Single Choice Grid Question rendered as 'Slider' values Image |
| stgNumericSliderTicks | class to define a Numeric Question rendered as 'Slider' when ticked |
| stgNumericSliderCheck | class to define a Numeric Question rendered as 'Slider' when checked |
| stgNumericSliderContainer | class to define a Numeric Question rendered as 'Slider' container |
| stgNumericSlider | class to define a Numeric Question rendered as 'Slider' |
| stgNumericSliderEdge | class to define a Numeric Question rendered as 'Slider' Edges |
| stgNumericSliderValue | class to define a Numeric Question rendered as 'Slider' values |
| stgNumericSliderValueImageHolder | class to define a Numeric Question rendered as 'Slider' values Image holder |
| stgNumericSliderValueImage | class to define a Numeric Question rendered as 'Slider' values Image |
| stgNumericGridSliderTicks | class to define a Numeric Grid Question rendered as 'Slider' when ticked |
| stgNumericGridSliderCheck | class to define a Numeric Grid Question rendered as 'Slider' when checked |
| stgNumericGridSliderContainer | class to define a Numeric Grid Question rendered as 'Slider' container |
| stgNumericGridSlider | class to define a Numeric Grid Question rendered as 'Slider' |
| stgNumericGridSliderEdge | class to define a Numeric Grid Question rendered as 'Slider' Edges |
| stgNumericGridSliderValue | class to define a Numeric Grid Question rendered as 'Slider' values |
| stgNumericGridSliderValueImageHolder | class to define a Numeric Grid Question rendered as 'Slider' values Image holder |
| stgNumericGridSliderValueImage | class to define a Numeric Grid Question rendered as 'Slider' values Image |
| stgScaleSliderHandle | Class to define a 'Scale' questions slider handle |
| unselectableText | Class to define a 'Rank Scale' Question Topic that is un-selectable |
| stgMultiChoiceGridTopicsList | Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' Topic list |
| stgMultiChoiceGridDropList | Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' drop list |
| stgMultiChoiceGridAnswerDivM | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' Answer surrounding div when running on a mobile device |
| stgMultiChoiceGridDropZoneDivM | Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zone surrounding div when running on a mobile device |
| stgTextBoxFullWidth | Class to define the Text box full width |
| stgListBoxLimitedHeight | class to define a list box height limit |
| stgMultiChoiceGridDropZonesPnlM | when rendering a Multiple choice grid question as ranked scale on a mobile device, this class will be added to the dive containing all the answers and the drop zones |
| stgSingleChoiceGridDropZonesPnlM | When rendering a single choice grid question as ranked scale on a mobile device, this class will be added to the dive containing all the answers and the drop zones |
That's It !
Comments
"Use A Custom CSS" hidden
Please sign in to leave a comment.