Last Updated janvier 2, 2023
Aperçu général
Les feuilles de style en cascade (CSS) vous permettent de personnaliser l’apparence d’une bulle, y compris la mise en page, les couleurs et les polices.
La fonctionnalité CSS dans WalkMe permet la personnalisation complète des Walk-Thrus et des étapes Walk-Thru. Avant de saisir les règles dans la fenêtre Personnaliser le CSS, vous pouvez vérifier si la règle CSS fonctionne en l’insérant dans l’onglet CSS personnalisé dans le Flow Tracker.
🎓 Institut d’adoption numérique
Cas d’utilisation
Les cas d’utilisation du CSS sont les suivants :
- Insérer une image ou un logo dans la bulle
- Personnaliser un ShoutOut de bienvenue pour votre site
- Modifier la largeur ou supprimer les queues d’une bulle
- Modifier le texte d’un bouton Suivant
Le CSS est une langue de feuille de style utilisée pour décrire le formatage d’un document écrit dans une langue de balisage. Lorsque vous écrivez le CSS, vous devrez vous référer aux différents composants ou les éléments de bulles trouvés dans les applications WalkMe. Lorsque vous tapez dans la fenêtre CSS personnalisé, WalkMe affiche des options automatiques pour les sélecteurs, les propriétés et les valeurs.
Le CSS peut être ajouté localement via l’Éditeur de texte enrichi ou globalement à partir du menu Personnaliser le Menu auquel vous avez accès dans la barre d’administration. Avant de saisir les règles dans la fenêtre Personnaliser le CSS, testez-le dans l’onglet CSS personnalisé qui se trouve dans le Flow Tracker.
Ayez le style avec le webinaire CSS
La configuration des composants de la bulle
Chaque bulle comprend un nombre de composants (éléments) qui peuvent être personnalisés avec le CSS. Par exemple, vous pouvez cibler la section de titre d’une bulle en utilisant cette classe : .walkme-custom-balloon-title (voir ci-dessous pour la liste complète des classes).
Les règles globales contre les règles locales pour les bulles
Le CSS peut être appliqué globalement ou localement. Le CSS local remplace toute autre conception et peut être appliqué à partir de l’Éditeur de texte enrichi dans le menu d’interaction d’une bulle :

Le CSS global peut être ajouté dans le menu Personnaliser :

L’utilisation de l’Éditeur CSS local (Éditeur de texte enrichi ) permet de personnaliser un seul ShoutOut. Si vous personnalisez un seul ShoutOut au niveau global, vous devez saisir l’ID* du ShoutOut avant la classe qui identifie la section bulle (c’est-à-dire au niveau local : .walkme-custom-balloon-title et au niveau global : .walkme-custom-balloon-title)
*Conseil de pro : pour les Walk-Thrus, l’ID peut être trouvé dans le Menu des paramètres Walk-Thru sous les paramètres avancés :

Utiliser !Important
Par défaut, la conception du thème WalkMe remplace tout autre changement de conception dans la bulle ou le Walk-Thru. Pour appliquer le CSS, la règle CSS doit contenir !important pour vous assurer qu’elle remplace le style par défaut.
Par exemple :
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
Les composants configurables

|
div |
Exemples d’attributs modifiables |
1 |
.walkme-custom-side-border |
Cet élément est la bordure gauche de la bulle :
|
2 |
.walkme-custom-balloon-separator |
Cet élément est le séparateur dans le tiers inférieur de la bulle :
|
3 |
.walkme-custom-balloon-title |
Cet élément est l’en-tête de la bulle :
- text-align
- font-color
- font-size
- font-family
- padding
- margin
|
4 |
.walkme-custom-balloon-content |
Cet élément est le texte de la bulle :
- text-align
- font-color
- font-size
- font-family
- padding
- margin
|
5 |
.walkme-custom-balloon-subtext |
Cet élément est le numéro d’étape :
- text-align
- font-color
- font-size
- font-family
- display
|
6 |
height |
Cet élément est le bouton Précédent :
- color
- font-size
- font-family
- width
- height
- background
- border-radius
|
7 |
.walkme-custom-balloon-next-button |
Cet élément est le bouton Suivant :
- color
- font-size
- font-family
- width
- height
- background
- border-radius
|
Les personnalisations CSS communes
Supprimer le bouton « X » d’une bulle
.walkme-custom-balloon-close-button {
.walkme-custom-side-border{
}
Supprimer les bordures latérales d’une bulle
.walkme-custom-side-border{
display: none !important;
}
Modifier les couleurs des bordures latérales d’une bulle
.walkme-custom-side-border{
rouge 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;
}
Modifier la largeur d’une bulle ShoutOut
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
Supprimer une la queue de la bulle
Walk-Thrus:
.walkme-custom-balloon-arrow.walkme-custom-step-xxxxxxx{
display: none !important;
}
Smart Walk-Thrus :
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}
Modifier le texte du bouton Suivant
div#walkme-balloon-xxxxxxx
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text{
font-size: 0 !important;
}
div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text:before {
content: « new text » !important;
visibility: visible !important;
font-size: 12px !important;
}
Modifier le texte pour le bouton Précédent
button.walkme-custom-balloon-button.walkme-custom-balloon-weak-button.walkme-custom-balloon-back-button.walkme-action-back.walkme-click-and-hover span.walkme-custom-balloon-button-text
Modifier le texte pour le bouton Terminé
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-done-button.walkme-action-done.walkme-click-and-hover span.walkme-custom-balloon-button-text
Modifier la police WalkMe globale
#walkme-menu *,
#walkme-player *,
.walkme-custom-balloon-outer-div *,
.wm-shoutout *,
.walkme-survey-balloon *,
.walkme-tooltip-outer-div *,
.walkme-custom-launcher-outer-div,
.walkme-icon-image-div.walkme-launcher-image-div * {
font-family: « Roboto »,Tahoma,Arial,Verdana,sans-serif !important; /*
}
Modifier la police d’un Launcher
.walkme-icon-image-div.walkme-launcher-image-div {
font-family: /*your font here*/ !important;
}
Modifier la police d’une bulle
.walkme-custom-balloon-title,
.walkme-custom-balloon-content,
.walkme-custom-balloon-button-text ${
font-family: /*your font here*/ !important;
}
#walkme-menu.walkme-penguin,
#walkme-main .walkme-title {
font-family: /*your font here*/ !important;
}.walkme-menu.walkme-penguin .walkme-icon {
font-family: /*your font here*/ !important;
}
Modifier la police d’un SmartTip
.walkme-tooltip-content-wrapper .walkme-tooltip-content {
font-family: /*your font here*/ !important;
}
Infobulles cachées dans les SmartTips
paramètres avancés
Display: none !important;
}div.walkme-custom-tooltip-arrow-top.walkme-custom-tooltip-item-YYYYY{
Display: none !important;
}
Appliquer les modifications de l’index Z à toutes les bulles d’un Walk-Thru
div.walkme-custom-walkthru-xxxxx.walkme-custom-simple-step {
z-index:0 !important;}
div.walkme-custom-walkthru-xxxxx.walkme-custom-balloon-arrow {
z-index:0 !important;}
Ouvrir ou étendre les catégories
*L’Irlande n’est pas prise en charge*
div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable {
display: block !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable.walkme-invisible,
div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable.walkme-invisible {
display: none !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable {
border-bottom: none !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon {
height: 20px !important;
padding-top: 4px !important;
margin-left: 12px !important;
width: 26px !important;
}
div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text {
padding: 0 !important;
}
div.walkme-menu.walkme-penguin .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before {
content: « e60a »;
}
div.walkme-menu.walkme-penguin .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before {
content: »e609″;
}
Raccourcis Trouver et remplacer
- Trouver : Ctrl-F / Cmd-F (appuyez sur Entrée pour rechercher le suivant, Maj-Entrée pour rechercher le précédent)
- Remplacer : Ctrl-R / Cmd-R
- Aller à la ligne : Ctrl-J / Cmd-J
Regardez une démonstration rapide ci-dessous :
Les modifications de la publication dans le CSS
Pour lancer les modifications du CSS, vous devrez publier.
Certaines modifications qui peuvent être appliquées à votre compte ne sont pas reflétées dans le menu Publish. Ces modifications comprennent les modifications qui sont apportées aux éléments suivants, et bien plus encore :
Toute modification de votre compte qui n’est pas liée à un élément spécifique de WalkMe sera automatiquement transférée dans votre environnement dès que vous publierez un contenu nouveau ou existant. Cela signifie que si vous avez récemment apporté des modifications à l’un de vos segments mondiaux, puis publié un Walk-Thru sans rapport avec celui-ci, les modifications apportées à votre segment seront également publiées.
Pour publier les modifications que vous avez apportées au CSS, effectuez un « Paramètres de publication » comme suit :
- Cliquez sur Publish (publier) dans la barre d’administration.
- Ouvrez l’onglet Publish.
- Si vous ne publiez que les modifications apportées au CSS, désélectionnez tous les éléments.
- Cliquez sur Publier.
Remarque : en cas d’erreur, le message de validation suivant apparaîtra dans la console CSS après avoir cliqué sur Enregistrer

Également disponible pour HTML si activé, demandez l’accès à votre contact WalkMe.
Ressources annexes
- Lisez les informations concernant la personnalisation du Lecteur et des bulles dans WalkMe sans utiliser le CSS.
- Utilisez le Flow Tracker pour prévisualiser le CSS.
La vidéo des conseils et astuces pour le CSS