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 In-app property see Preview App

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.

Previewing custom CSS in an app

To gain more control over the preview on a Digital In-app property you can use a debug version of the app and connect to it from a computer. Then you can use a similar process to Digital Web where you override the CSS file locally.

Before you proceed, you need:

  • A debug version of the app which can trigger the form.

  • A published form with a custom CSS file assigned to it. The contents of the CSS file are not critical as this process enables you to override the whole file.

  • A computer where you can run a browser and connect to the app.
  • Ideally, a device where the app is running. Alternatively, use a simulator (beyond the scope of this document).

To override the custom CSS file used by an app:

  1. Open the survey you want to preview. It must be open in the app itself, for example click the Feedback button or satisfy a targeting rule.
  2. Connect the device where the survey is open to the computer, for example using USB. Often at this point you have to give the computer permission to connect to the device.
  3. Depending on which operating system you are using:

When you have the device's survey form open in the browser on the computer you can then override the CSS and quickly iterate over testing your customizations.

The device's survey form open in the browser on the computer.

Making changes with local overrides

Once an app that integrates Digital In-app SDK is connected to a browser, it is possible to make temporary changes and test various CSS property settings locally. These changes are not saved to your propertyproperty in the resources library and are only temporary in the current browser window. For example to preview custom CSS in an app use the Chrome developer console.

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.