CSS customization allows you to go beyond the options available in the “Branding” section and strengthen the tool’s integration by aligning it perfectly with your brand guidelines.

CSS customization offers many possibilities, including:

CSS customization is done by importing a file that contains the CSS rules to apply. Below is the procedure to upload this file:

Editing elements is done by writing CSS rules in a file to be imported from the back office.

The first step to edit elements is to find a selector, usually the name of the class applied.

The easiest way is to use your browser’s element inspector. Note that developer mode must be enabled, especially on Safari.

In the screenshot above, we can see that the block containing texts and buttons uses

the classes lds-section-header__wrapper--content and right. We'll use this block for the rest of the document.

To override multiple use cases:

For example, the background color of the previously identified block. Since it doesn’t have an explicit background color, just use the class name as a selector.

For example, the vertical spacing (gap) between texts and buttons. Intuitively you might write:

This change won’t work because the app’s CSS has priority due to the underlying technology. You can see this in the inspector: the gap: 60px property appears crossed out, as the app’s class (identifiable by [data...]) takes precedence.

However, there are two ways to edit this spacing:

Either by combining classes or by defining the hierarchy.

The 60px gap is applied. This rule takes precedence over the app’s rule.

The !important flag in CSS forces a property to override other rules. Use it sparingly.

The 60px gap is applied even though the rule is second in order.

The front user interface is «responsive»thanks to media queries. The app follows a «mobile first » approach, meaning the base CSS is designed for small screens and larger screen styles override it. Here are the breakpoints used:

​