Last Updated janvier 23, 2024
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 l'onglet d'interaction.
Le CSS global est accessible à partir du menu déroulant des paramètres dans l'Éditeur.
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* de ShoutOut avant les classes qui identifient la section de bulle.
Exemple de niveau local : .walkme-custom-balloon-title
Exemple de niveau global : #walkme-balloon-XX.walkme-custom-balloon-titre)
Conseil
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.
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
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;
}
Modifier la largeur d'une bulle ShoutOut
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
Supprimer une flêche d'une bulle
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}
Supprimer les numéros d'étape d'une bulle
.walkme-custom-balloon-subtext {
display: none !important;
}
Modifier le texte du bouton Suivant
Remarque
Remarque : les paramètres Texte et Multilingues ne sont plus dans Insights et sont plutôt accessibles à partir de la page Traductions dans la Console WalkMe sur console.walkme.com. En savoir plus.
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 Retour
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; /* Ajouter une règle de famille de polices souhaitée*/
}
Note
La règle de famille de polices doit être codée sur chaque page sur laquelle WalkMe est mis en œuvre. Si la règle de police n'est pas codée sur une page spécifique, WalkMe ne pourra pas extraire et lire la police correctement.
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;
}
Appliquez les modifications Z-Index à toutes les bulles 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 / développer les catégories
Remarque
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ètre 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
