How To Customize your Display using CSS file

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 'Display' tab in the 'Survey Web Properties' - Customize Display - uncheck the 'Use Custom CSS' and upload your 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:

  • 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. 

  1. 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) 
  2. 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)
  3. 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:

  1. Click on F12 while the survey is showing in the browser 
  2. Click on Ctrl+F to search and enter the class name - hit the enter
  3. 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

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
stgClerAnswerButton 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

 

 That's It !

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.