CSS pour Smart Walk-Thrus

Last Updated juillet 2, 2024

Download as PDF

Aperçu rapide

L'utilisation de feuilles de style en cascade (CSS) vous permet de personnaliser les éléments du Smart Walk-Thru, y compris la présentation, les couleurs et les polices.

Lors de l'écriture de CSS, les références aux différents composants ou éléments du Smart Walk-Thru sont essentielles. Cet article donne un aperçu des options CSS disponibles pour personnaliser ces éléments avancés.

Pour personnaliser les Smart Walk-Thrus à l'aide des options par défaut, affichez le guide Smart Walk-Thru : Premiers pas.

CSS

Comment ça marche

Composants de Smart Walk-Thru

Chaque Smart Walk-Thru comprend un certain nombre de composants (éléments) qui peuvent être personnalisés avec CSS. Les Smart Walk-Thrus peuvent être personnalisés à la fois localement et globalement.

Si vous personnalisez un seul Smart Walk-Thru au niveau global, vous devez saisir l'ID du Smart Thru avant la classe qui identifie la bulle.

Exemple de niveau local :

• .walkme-custom-balloon-title

Exemple de niveau global :

• #walkme-balloon-XXXXXXX.walkme-custom-balloon-title

L'ID Smart Walk-Thru peut être trouvé dans l'éditeur WalkMe :

1. Survolez le Smart Walk-Thru dans l'éditeur
2. Cliquez sur le menu Options
3. Sélectionnez Copier l'ID

Voir ci-dessous pour une liste complète des classes.

Utilisation d' !important

Par défaut, la conception du thème WalkMe prévaut sur toute autre modification de la conception.

Pour que le CSS soit appliqué, la règle CSS doit contenir "!important" afin de s'assurer qu'elle remplace le style par défaut.

Exemple :

#walkme-balloon-1760356 .walkme-custom-balloon-title {

color: #000 !important;

}

Modifier le CSS local

1. Ouvrez le menu Options d'étape Smart Walk-Thru
2. Accéder à l'onglet Interaction
3. Cliquez sur Modifier le CSS
4. Saisissez le CSS personnalisé dans la console CSS
5. Cliquez sur Save (Enregistrer).

Modifier le CSS global

1. Cliquez sur Modifier le CSS global dans le menu des paramètres de l'éditeur WalkMe
2. Saisissez le CSS personnalisé dans l'Éditeur CSS
3. Remplacez les sections surlignées dans le CSS ci-dessous par vos personnalisations
4. Cliquez sur Save (Enregistrer).
5. Cliquez sur Publier les paramètres

Composants Smart Walk-Thru personnalisables

Personnalisations CSS courantes

Supprimez le bouton « X » d'une bulle

.walkme-custom-balloon-close-button {
.walkme-custom-side-border{
}

Supprimez les bordures latérales d'une bulle

.walkme-custom-side-border {
display: none !important;
}

Modifier la couleur de la bordure de côté de la bulle

.walkme-custom-side-border {
background-color: red !important;
}

Modifier la couleur d'arrière-plan de la bulle

#walkme-balloon-XXXXXXX .walkme-custom-balloon-content-wrapper {
background-color: green !important;
}

Modifier la largeur d'une bulle

#walkme-balloon-xxxxxxx {
width: 300px !important;
min-width: 0 !important;
padding: 10px !important;
}