Les feuilles de style en cascade (CSS) vous permettent de personnaliser l'aspect et la convivialité du contenu de WalkMe, y compris la mise en page, les couleurs et les polices.
La fonction CSS de WalkMe permet de personnaliser certains types de contenu, notamment les étapes du Smart Walk-Thru, les enquêtes et le menu WalkMe.
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 des feuilles de style CSS, vous devez faire référence aux différents composants ou éléments de votre contenu WalkMe.
Chaque élément de WalkMe comprend un certain nombre de composants (éléments) qui peuvent être personnalisés à l'aide de CSS.
Par exemple, vous pouvez cibler la section du titre d'un ballon en utilisant cette classe :
.walkme-custom-balloon-title
Meilleures pratiques
Lors de la saisie d'une feuille de style CSS personnalisée, WalkMe affiche des options d'auto-complétion pour les sélecteurs, les propriétés et les valeurs.
Le CSS peut être appliqué globalement ou localement. L'utilisation de la console CSS locale facilite la personnalisation d'un élément individuel de WalkMe. Si vous personnalisez au niveau global, vous devez saisir l'ID de l'élément WalkMe.
Exemple de niveau local : .walkme-custom-balloon-title
Exemple de niveau global : #walkme-balloon-XXXXXXX.walkme-custom-balloon-title
Le CSS local est prioritaire sur tous les autres modèles.
Ouvrir le menu de paramétrage des éléments
Accéder à l'onglet Interaction
Cliquez sur Modifier le CSS
Saisissez le CSS personnalisé dans la console CSS
Cliquez sur Save (Enregistrer).
En cas d'erreur, un message de validation apparaîtra après avoir cliqué sur Enregistrer.
Les messages d'erreur sont également disponibles en HTML sur demande. Veuillez contacter votre Customer Success Manager ou votre contact WalkMe pour activer cette fonction.
Modifier le CSS global
Cliquez sur Modifier le CSS global dans le menu des paramètres de l'éditeur WalkMe
Saisissez le CSS personnalisé dans l'Éditeur CSS
Cliquez sur Save (Enregistrer).
Cliquez sur Publier les paramètres
Rechercher et remplacer des raccourcis
Vous pouvez utiliser les raccourcis clavier suivants (Windows / Mac) pour rechercher et remplacer dans la console CSS :
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 :
Trouver l'identifiant WalkMe
Survoler l'élément dans l'éditeur
Cliquez sur le menu Options
Cliquez sur Copier l'ID
Utiliser !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.
Les CSS locaux ont toujours la priorité sur les CSS globaux
L'ajout de CSS à votre contenu WalkMe peut également affecter les CSS sur le site où le contenu est visualisé
Si l'indentation et les espaces blancs ne sont pas ajoutés au CSS global, il ne sera pas publié ou visible en mode lecture, mais restera visible en mode prévisualisation.
La meilleure pratique consiste à formater le code dans un environnement de développement intégré (IDE), tel que Visual Studio Code ou Sublime, et à le tester d'abord dans le Flow Tracker.
Pour que les modifications apportées au CSS soient prises en compte, vous devez procéder aux Paramètres publier.
