Skip to main content
Feedback

CSS reference

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

Customize your web applications using CSS (Cascading Style Sheets).

Overview

You can use CSS to customize the styling of HTML elements in a web application. By specifying your own CSS to override existing styles or add new styles, you can completely customize the appearance of your flows.

Using CSS to customize the default player runtime

If you are using the default player to run your flows, you can customize it using CSS:

  • Add CSS to an individual page component: Customize specific individual elements in a flow, such as components on a page. Add your own custom CSS classes into the CSS Class field of a page component in the page builder. This CSS styling is then applied to the page component when the flow is run.

  • Override the existing CSS for general root elements: Customize the general root classes and styles applied to all components and elements within a flow, such as all tables, paragraphs, fonts, colors, and so on. Add your own CSS into a custom player or linked stylesheet that overrides the existing default CSS classes when the flow is run. For example, you could override all the general typographic elements in a flow to match your own corporate branding.

When customizing the default runtime CSS framework, you can use the main .flow top-level selector to target the correct classes. For example, you can use .flow .img to target all images in the flow default player runtime.

Using CSS to customize the default legacy player runtime

If you are using the default legacy player to run your flows, you can customize it using CSS:

  • Add CSS to an individual page component: Customize specific individual elements in a flow, such as components on a page. Add your own custom CSS classes into the Classes attribute of a page component in the page builder. This CSS styling is then applied to the page component when the flow is run.

  • Override the existing CSS for general root elements: Customize the general root classes and styles applied to all components and elements within a flow, such as all tables, paragraphs, fonts, colors, and so on. Add your own CSS into a custom player or linked stylesheet that overrides the existing default CSS classes when the flow is run. For example, you could override all the general typographic elements in a flow to match your own corporate branding.

When customizing the CSS styling for the default legacy player, it is important to understand that it is based on the Bootstrap v3.3.2 grid system. If you are overriding or adding new CSS for the main Bootstrap classes used by , each class/id should also use an .mw-bs selector to ensure the correct targeting and specificity of the container wrapper in the player.

Getting started with CSS in Flow

New to CSS in ? The following topics can help you get started.

  • Using CSS to customize a flow - A worked example of how you can use CSS to customize elements in a flow. This example uses the default legacy player runtime.
  • Detecting the correct CSS style - Learn how to investigate and identify which CSS styles you should target to customize a page with CSS.
  • W3schools.com- Learn more about using CSS at the W3schools web developer site.|

Flow General CSS reference

The following CSS relates to general styles, such as typography, buttons and the navigation element.

  • Containers CSS - The main CSS classes/selectors used to customize containers.
  • Images CSS- The main CSS classes/selectors used to customize images.
  • Navigation CSS- The main CSS classes/selectors used to customize Navigation elements.
  • Buttons CSS - The main CSS classes/selectors used to customize Outcomes and button elements.
  • Typography CSS - The main CSS classes/selectors used to customize general typographic elements, such as headings and body text.

Flow Component CSS reference

The following CSS relates to specific components. See Components.

On this Page