CSS
Aperçu rapide
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.
Ayez le style avec le webinaire CSS
Cas d'utilisation
Les cas d'utilisation du CSS sont les suivants :
- Insérer une image ou un logo dans la bulle
- 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
Règles mondiales par rapport aux règles locales
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
Modifier le CSS local
- 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).
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.
Exemple :
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
Les personnalisations CSS communes
Smart Walk-Thrus
Surveys
Menu WalkMe
ActionBot
ShoutOuts classiques
Général WalkMe
Modifier la police WalkMe globale
#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*/
}
Launchers
Modifier la police
font-family: /*your font here*/ !important;
}
SmartTips
Modifier la police
font-family: /*your font here*/ !important;
}
Masquer les infobulles
Informations techniques
- 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.
- Lorsque vous modifiez un texte à l'aide d'une feuille de style CSS, gardez à l'esprit qu'il peut remplacer les traductions.
- Les termes suivants ne sont pas pris en charge et peuvent entraîner des erreurs :
- @import
- expression
- javascript
- -moz-binding
- -o-link
- comportement
- Seuls les ShoutOuts classiques prennent en charge les CSS
- Le CSS ne peut pas affecter les éléments Dom fantômes