CSS

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.

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

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

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

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

Modifier la police WalkMe globale

Modifier la police d’un Launcher

Modifier la police d’un SmartTip

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

Vous pouvez utiliser les raccourcis clavier suivants (Windows/Macintosh) 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 publier les modifications que vous avez apportées au CSS, effectuez un « Paramètres 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.