La personnalisation CSS offre la possibilité d'aller au-delà des options disponibles dans la section « Branding » et de renforcer l'intégration de l'outil en l'alignant parfaitement avec votre charte graphique..

Remarque : la personnalisation du CSS est disponible dans les plans Advanced et Plus https://www.loyoly.io/plans

La personnalisation CSS offre de nombreuses possibilités, notamment :

L’intégration de la personnalisation du CSS se fait via l’import d’un fichier regroupant les règles CSS à appliquer. Ci-après le mode opératoire pour charger ce fichier.

L’édition d’éléments se fait via l’écriture de règles CSS dans un fichier à importer depuis le back-office.

La première étape pour éditer des éléments est de trouver un sélecteur, généralement le nom de la classe appliquée.

La façon la plus simple est d'utiliser l'inspecteur d'éléments de votre navigateur. Notez que le mode développeur doit être activé, en particulier sur Safari.

Sur la capture ci-dessus, nous observons que le bloc contenant les textes et boutons utilise les classes lds-section-header__wrapper--content et right. Nous nous appuyons sur ce bloc dans la suite du document.

Pour surcharger plusieurs cas de figure :

Par exemple, la couleur d’arrière plan du bloc identifié précédemment. En effet, elle n’a pas de couleur de fond explicite. Dans ce cas de figure, il suffit d’utiliser le nom de classe en tant que sélecteur.

Par exemple, l'espacement vertical (gap) entre les textes et les boutons. De façon intuitive, nous pourrions vouloir écrire ce qui suit.

Cette modification ne fonctionne pas car le CSS de l'application a la priorité en raison de la technologie utilisée. Vous pouvez le constater dans l'inspecteur d'éléments : la propriété gap: 60px apparaît barrée, car la classe de l'application (identifiable par [data...]) prend le dessus.

Cependant, il existe deux possibilités pour éditer cet espacement.

La première est d'être plus précis dans la déclaration de la règle, soit par combinaison de classes, soit par hiérarchisation.

Dans notre exemple, la classe est incluse dans une div parente dont la classe est lds-section__content. Pour avoir la priorité sur le code de l'application, nous devons mentionner cette hiérarchie. Nous pouvons utiliser le CSS Nesting pour y parvenir.

Le gap de 60px est pris en compte. La règle est en première position par rapport à celle de l’application.

La seconde est l’utilisation de !important. La règle !important en CSS permet de forcer la priorité d'une propriété CSS sur les autres règles. Il faut toutefois l'utiliser avec parcimonie.

Le gap de 60px est pris en compte bien que la règle apparaisse en seconde position.

Le front-user est « responsive » grâce à l'utilisation de media-queries. L'application suit une approche « mobile first », ce qui signifie que les règles CSS de base sont conçues pour les petits écrans. Les adaptations pour les écrans plus grands sont ensuite appliquées en surcharge. Ci-après la liste des breakpoints employés.

N’utilisez pas ces noms pour surcharger le CSS. Le [data-XXXXXXXX] est généré par la technologie utilisée pour la construction technique du front user. D’une version à une autre, ce numéro peut varier, ce n’est pas pérenne.