CSS customization

Digital is a dynamic environment that includes several methods to style surveys to match the design of a website. Keeping style consistent across a website is important to make customers feel like it is directly from a company.

Use the built-in drag-and-drop feature in survey editor to add questions and conditional displays to a survey. Use cascading style sheets (CSS) to style surveys and enhance survey presentation to meet organizational UX requirements.

Cascading style sheets (CSS) is a language that describes the style of any HTML document. All websites use CSS as a method to apply a theme or style across a whole website. CSS describes how HTML elements should be displayed on screen, paper, or other media. CSS cannot modify the function of an object (i.e., how it works); it can only modify how it looks.

Custom CSS allows for the use of the same fonts, colors, spacing, and other styles used by an existing branded website. See CSS library for examples of how to use the available custom CSS settings.
Note: Do not use the CSS file associated with your corporate website directly. It may contain references that do not apply to Digital surveys, which may cause display and functional problems.
See the following topics for details on CSS customization:

Document audience and usage

This document assumes that you have a basic understanding of CSS and requires a basic understanding of HTML web design, user experience, and user interface design. This document is not an instructional or general guide to CSS. Examples provided are specific to the most commonly requested survey changes and associated CSS rules, selectors, classes, and properties.

This document provides guidance on how to edit or change various survey properties with support from your Medallia expert and best practice options. Consult your user interface, user experience, or marketing team for specific style requirements.

See the following websites for additional information on CSS:

CSS file

Digital provides the ability to use an external style sheet that is stored in a simple text file called a CSS file. CSS files usually end in the suffix ".css". An example is as follows:

https://assets.kampyle.com/clients/nebula/sample_files/ResponsiveRatingScale-std-template-color-onlyV1.css

There are no special tools required to create a CSS file. Use a standard text editor (not Microsoft Word or a rich text editor).

The following are recommended text editors for Windows:

  • Notepad — Built into Windows but does not provide syntax highlighting.

  • Notepad++ — Free of cost; includes CSS syntax highlighting.

  • Komodo Edit — Free of cost; includes CSS syntax highlighting.

  • Brackets — Free of cost; build for web design. See http://brackets.io/ for additional information.

The following are recommended text editors for Mac:

  • TextEdit — Built into Mac OS but does not provide syntax highlighting.

  • Xcode — Free to download; aimed at developers. It is large and includes other tools that may be confusing.

  • Brackets — Free of cost; built for web design.

  • BBEdit — Free of cost.