How To Customize your Display using Custom CSS

Guide to applying custom CSS to a CAWI survey—CSS overrides specific elements while leaving the rest of the CAWI Theme intact.

 

Overview

This guide describes and explains how to further customize a CAWI survey design if needed by applying a CSS file in addition to the existing design that was set by applying a specific CAWI Theme.  It is important to note that applying a custom CSS to the survey will only impact the specific settings/objects that the CSS includes while leaving all the rest as defined in the CAWI Theme. 

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 CSS' tab under CAWI main survey tab 

To create a custom CSS design you can download the default CSS then adjust it. 

The default CSS includes all the current settings as commented so to change a specific object/attribute you first uncomment the specific setting then modify it as required. You can of course add additional settings to the CSS if required.

 

After you have applied the needed changes to the CSS file you can now apply it to thew survey. Check the Apply Custom CSS/JS check box:

 

Then click the Upload CSS file

 

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 next button (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 'stgNNextButton' and search for it in your CSS file to change or update its settings (do not forget to uncomment that part in the CSS).