CSS customizations

Use CSS to customize the appearance and functionality of survey components

Digital Feedback is a dynamic environment that includes several methods to style surveys to match the design of where Digital is embedded. Keeping style consistent during an experience is important to make it feel like it is directly from a company. By default Digital provides a lot of options to make basic style changes, such as text color and so on. But some situations require more style options, and Digital supports cascading style sheets to provide greater control over survey design to meet organizational UX requirements.

Cascading style sheets (CSS) describe the style of any HTML document and are an industry standard method to apply a theme or style across a digital content. CSS allows for the use of the same fonts, colors, spacing, and other styles used for existing branding. CSS cannot modify the function of an object, for example how it works; CSS can only modify how it looks. See Example CSS customizations for how to use the available custom CSS options.

Tip: Do not use the CSS file associated with your corporate website directly. It might contain references that do not apply to Digital surveys, which could cause display and functional problems

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". 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.

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

  • BBEdit — Free of cost.

When not to use CSS

Before defining custom CSS for your surveys, don't forget that the Digital Command Center provides many options for customizing the look and feel of your surveys without the need for custom CSS. The following examples illustrate ways of customizing surveys without CSS.

For example, CSS is not necessary for styling Next, Back, and Submit buttons. Change the text, background color, and text color for a button using the options on the Basic Settings tab of Form Settings.

Button styling options on the Basic Settings tab of Form Settings.

Survey background and text color

Change the survey background color, text color, or upload an image to be used on the background of the survey using the options of the Form Design tab of Form Settings.

Survey background color and text options on the Form Design tab of Form Settings.

Survey page background color

Change the background color of a specific page of a survey on the Page Settings tab in the survey editor.

Survey background color option on Page Settings tab in survey editor.