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
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.
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
<body> inaccessible, there is still a root container that is full width
and height that is selectable with the following CSS selector
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.
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
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.
If the content represented by the link is currently loaded the list item will
.is-active class applied to it.
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.
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.
There are several components which appear within the journey that have hooks available for custom CSS.
This component contains the logo if one has been uploaded and the progress meter.
The journey container wraps the page content and navigation components.
The page wrapper contains the main content element and footer content element.
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.
The footer content element is similar to the page content element.
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
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.
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.
This widget is fairly simple in that it is a simple wrapper around a button
that is built with an
Mobile App Download
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.
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.
This widget is a simple wrapper around an
This widget is a simple wrapper with an
<img> tag in it.
This widget will always be the actual
<iframe> being embedded in the page.
.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
.wistia-widget, Vimeo videos will have a selector of
YouTube videos will have a selector of
.youtube-widget. Their internal markup
may vary based on the video service being used.
Although it is possible to target personalizations directly, it is not recommended. Personalizations should blend into the content naturally.
This widget is a
<div> with a style attribute setting the height.