How To Use SurveyToGo CSS Studio

Customer Support Manager

November 27, 2019 10:07

Overview

We have provided the “CSS Studio” to allow you to check the modifications you make to the CSS and how they change the design.

The CSS Studio utility is located in this address - https://cawi.dooblo.net/cssstudio/?ticket=XXXX

(Replace the XXXX with the ticket number from your Respondent Link, click here to learn how to create respondent links)

Online Video

Direct Youtube link (for full screen): https://youtu.be/GUv7Qnd1fmI

Using CSS Studio and the default CSS provided

1. Once you start it up it will show this screen:

The left pane allows you to modify the CSS and clicking on “Refresh Survey” will reload the preview to show you what the change looks like. You can add custom JS code by clicking on the JS tab:

And then this JS code will be loaded along with the page in the preview so you can utilize the functions of the JS in the CSS if needed.

The available buttons are:

#	Button	Description
1	Refresh Survey	This will reload the preview with any changes you made to the CSS/JS code
2	Load	Allows you to load a CSS/JS file from your computer into the editor pane
3	Save	Saves the current CSS/JS to a local file on your computer for later loading
4	Load Default CSS	Resets the Editor page to have the default CSS of the survey
5	Pages button	Allows you to move to the next screen. Important for checking that the progress bar works correctly.

How to make a changes to the default CSS?

When you initially open the CSS Studio app it will show you the survey using the default CSS and no JS code. To modify for example the CSS to have a different background color for the header of the survey:

Locate the “stgTopBrandControl” in the CSS:
Add for example: “background-color: blue;” to the class:
Now click the “Refresh Survey” button and now the top banner is colored in blue:
Once you are done designing your CSS click on 'Save' and load the CSS to your survey.

PLEASE NOTE: Making changes to the CSS will only affect how the previewer shows the survey. It does not change the way the survey shows when accessing the actual survey link. This is by design. You are supposed to check using the CSS Studio preview panes.

More information about the different classes used in the default CSS

You can either use the Chrome “inspect” tool to learn more about which class is used but you can also learn more about the specific classes here: https://support.dooblo.net/hc/en-us/articles/360000339929-How-To-Customize-your-Display-using-CSS-file and scroll down to the “STG CSS Elements” section:

That's It !