Custom CSS · Digital Onboarding

Templates that use Custom CSS have no base styling applied. Some components will bring enough styling for their basic functionality to be preserved but you will need to supply the rest. If your CSS loads any external resources (images, fonts, etc...), you will need to make sure they are loaded via https://.

This document covers the basic functionality and selectors available for customizing the look and feel of journeys. It is not exhaustive so you may need to inspect the rendered html to target specific elements inside a component.

Structure

Custom CSS is sandboxed to make sure it doesn't collide with any assets or resources outside the journey view. While this makes some tags like <html> and <body> inaccessible, there is still a root container that is full width and height that is selectable with the following CSS selector .journey-wrapper.

The sandboxing respects @media queries which means you can still target specific screen sizes, orientations, and devices.

The basic structure of a journey's markup is illustrated below.

<div class="journey-wrapper">
  <header class="journey-header">...</header>
  <nav class="navigation">...</nav>
  <div class="journey-header">...</div>
  <main>
    <div class="page-wrapper">
      <div class="page-content">/*widgets and content are rendered here*/</div>
      <div class="footer-content">...</div>
    </div>
    <div class="journey-support-owner">...</div>
  </main>
</div>

This does not document all elements in the page, but it can be used as a guide in case you want to chain selectors.

CSS Variables

Branding colors are still available when using custom CSS. Two variables are injected into the stylesheets and updated as the fields are updated so that they can be used in your custom CSS. The value of the Primary Color field will be accessible in --template-primary-color. Likewise, the value of the Secondary Color field will be accessible in --template-secondary-color.

Navigation

The navigation relies on an unordered list and has the following structure.

<nav class="navigation">
  <ul>
    <li>
      <a>
        <div class="icon">
          <svg>...</svg>
        </div>
        <div class="page-title">...</div>
      </a>
    </li>
  </ul>
</nav>

Classes are conditionally applied to the list item based on the state of the content it represents.

Active Content

li.is-active

If the content represented by the link is currently loaded the list item will have the .is-active class applied to it.

Completed Content

li.is-complete

If the content represented by the link has had its completion condition met the list item will have the .is-complete class applied to it.

Hidden Content

li.is-not-live

You don't necessarily need to provide a style for this selector. It is only used in the editor interface to indicate to the user editing the content that the page is not live and thus will not be displayed to end users.

Components

There are several components which appear within the journey that have hooks available for custom CSS.

Journey Header

.journey-header

This component contains the logo if one has been uploaded and the progress meter.

Journey Container

.journey-container

The journey container wraps the page content and navigation components.

Page Wrapper

.page-wrapper

The page wrapper contains the main content element and footer content element.

Content

.page-content

The content element contains all page-specific content – including any widgets that have been added to the content. These are documented in more detail below.

Footer Content

.footer-content

The footer content element is similar to the page content element.

Navigation

.navigation

The navigation component contains links to all pages in a journey. Inspect its content for a better understanding of statuses that are applied to the links.

Support Owner Links

.journey-support-owner

This is shown as a sticky footer in the default theme. It contains links that are automatically hidden if the relevant link is not set.

Widgets

All widgets are selectable with a class based on their widget type. The content of the widgets will vary depending on their purpose and state.

CTA

.cta-widget

This widget is fairly simple in that it is a simple wrapper around a button that is built with an <a> tag.

Mobile App Download

.mobile-app-download-widget

The mobile app widget changes what it renders based on the device it is rendered on and the its current state. Be sure to test your styling on mobile devices and PCs. When the widget is showing a form for a user to enter their number there is an additional state that can be styled after the user has submitted the form.

Survey

.survey-widget

The survey widget is very complex and contains text inputs, radios, checkboxes, and buttons. If you are styling the components in a survey make sure you have provided styling for all the elements in it you will be using.

Document Embed

.document-embed-widget

This widget is a simple wrapper around an <iframe>.

Image

.image-widget

This widget is a simple wrapper with an <img> tag in it.

Webpage Embed

.webpage-widget

This widget will always be the actual <iframe> being embedded in the page.

Video Embed

.vimeo-widget,
.wistia-widget,
.youtube-widget;

Due to the nature of video embeds they will be rendered with a selector that varies based on the type of video they are. Wistia videos will have a selector of .wistia-widget, Vimeo videos will have a selector of .vimeo-widget, and YouTube videos will have a selector of .youtube-widget. Their internal markup may vary based on the video service being used.

Personalization

.personalization-widget

Although it is possible to target personalizations directly, it is not recommended. Personalizations should blend into the content naturally.

Divider

.divider-widget

This widget is a <div> with a style attribute setting the height.