How To Use SurveyToGo CSS Studio

Guide to SurveyToGo: CSS Studio—preview and test CSS modifications against a live CAWI survey using the CSS Studio utility at cawi.dooblo.net.

 

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)

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:

1. Locate the “stgTopBrandControl” in the CSS:
2. Add for example: “background-color: blue;” to the class:
3. Now click the “Refresh Survey” button and now the top banner is colored in blue:
4. 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