Testing custom CSS

After uploading the CSS file to the resources library and assigning it to the relevant survey, test the CSS customizations using the Preview feature. On a Digital Web property see Preview surveys

The CSS file is applied to the preview.

Form Preview.This is the most common way to test CSS customizations. The only disadvantage of this method is that iterating changes and testing them becomes a process of repeatedly uploading the CSS file to the resources library and then opening the preview again. An alternative is to override the CSS file locally while testing. Some customers find this a convenient way to quickly test custom CSS changes because it avoids having to repeatedly upload the modified CSS file.

The exact procedure for overriding CSS locally depends on the type of Digital property, the browser being used, and so on. But the principle is the same - a local CSS file overrides the usual CSS file that is stored in the resources library. This local CSS file can be modified quickly and then the browser window with the survey form preview refreshed. This avoids having to upload the CSS file repeatedly to the resources library to test each change. After iterating over the changes, when the final CSS file is ready, upload it to the resources library for deployment.

Making changes with local overrides

It is possible to make temporary changes and test various CSS property settings locally. These changes are not saved to your property in the resources library and are only temporary in the current browser window. For example, in Google Chrome open the developer console and enable local overrides of content.

Find the survey form's custom CSS file in the tree and override it. See Chrome override documentation.

Example of local overrides enabled in browser.

If you can't find the CSS file to override, ensure that it has been assigned to this survey in the Form Settings.

Viewing recent changes

When you use browser based local overrides to preview custom CSS, to view the most recent changes made to the CSS file, clear the browser cache or force the browser to refresh the cache. For example, to force a cache refresh in Chrome:

  1. In the browser's URL, right-click the Refresh icon and select Empty Cache and Hard Reload. Refresh icon options in Chrome.