CSS

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
Remarque

Les ShoutOuts réguliers (pas classiques) ne sont pas pris en charge par CSS. Vous pouvez les personnaliser directement dans le Visual Designer.

Comment ça marche

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

Communauté WalkMe

Rejoignez la conversation dans la Communauté mondiale WalkMe !

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 :
  • display
  • background
2 .walkme-custom-balloon-separator Cet élément est le séparateur dans le tiers inférieur de la bulle :
  • display
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;
}

Modifier la police d’un Widget

#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

Vous pouvez utiliser les raccourcis clavier suivants (Windows/Mac) pour rechercher et remplacer dans la console CSS personnalisée :

  • 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 :

  1. Cliquez sur Publish (publier) dans la barre d’administration.
  2. Ouvrez l’onglet Publish.
  3. Si vous ne publiez que les modifications apportées au CSS, désélectionnez tous les éléments.
  4. 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

Cet article a-t-il été utile?

Merci pour votre avis!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×

Sélectionnez le type de compte

Fermer
< Retour

Mobile account login

< Retour