Last Updated février 11, 2024
Veuillez noter que cet article ne fournit que les fondements de l'utilisation du CSS avec le menu et le Widget WalkMe. Il est recommandé d'avoir des connaissances de l'utilisation du CSS au préalable.
Aperçu général
Les feuilles de style en cascade (CSS) vous permettent de personnaliser l'apparence d'un document, y compris les éléments tels que la mise en page, les couleurs et les polices. Nous pouvons utiliser le CSS pour appliquer une personnalisation avancée au menu WalkMe.
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 écrirez du CSS, vous devrez consulter les différents composants ou éléments du Menu WalkMe.
Lorsque vous tapez dans la fenêtre Custom CSS (CSS personnalisé), WalkMe affiche des options automatiques pour les sélecteurs, les propriétés et les valeurs. Le CSS global est ajouté dans le menu Customize (personnaliser) accessible à partir de la barre d'administration.
Avant de saisir les règles dans l'onglet du CSS du menu Customize, vous pouvez vérifier si la règle CSS fonctionne en l'insérant dans l'onglet Custom CSS (CSS personnalisé) dans le Flow Tracker (suivi du flux).
Le menu WalkMe ne peut être personnalisé que globalement, car il n'y a qu'un seul menu. Toutes les règles CSS pour le Menu doivent commencer avec l'ID suivant : #walkme-menu. Cette règle peut être réduite plus précisément par le type, qui est #walkme-menu.walkme-penguin. Des composants supplémentaires du lecteur peuvent être ajoutés à cette chaîne.
Par exemple :
#walkme-menu.walkme-penguin .walkme-title (voir ci-dessous pour une liste complète de classes).
Utilisation d' !important
Par défaut, la conception du thème WalkMe remplace toute autre modification de conception du menu. Pour appliquer le CSS correctement, la règle CSS doit contenir !important pour vous assurer qu'elle remplace le style par défaut.
Par exemple :
.walkme-out-wrapper { color: #000 !important; }
Il existe plusieurs styles et thèmes de widget que vous pouvez choisir dans l'onglet Customize Player (personnaliser le lecteur) dans le menu Customize. Lorsque vous ajoutez du CSS, certaines des classes suivantes sont pertinentes pour toutes les options de Menu, tandis que d'autres apparaissent uniquement dans certaines.
| div |
Attributs modifiables |
Styles de menu applicables |
| .walkme-out-wrapper |
Cet élément entoure l'ensemble du menu WalkMe. Vous serez en mesure de modifier :
|
Danube
Colorado
Mississippi |
| .walkme-in-wrapper |
Cet élément entoure l'ensemble du menu WalkMe. Vous serez en mesure de modifier :
- border radius
- height & width
- background
- border
- border-radius
- box-shadow
|
Danube
Colorado
Mississippi |
| .walkme-title |
Cet élément contient le texte. La position par défaut est absolue. Vous serez en mesure de modifier :
- font-color (couleur de police)
- font-size
- font-family
|
Danube
Colorado
Mississippi |
| .walkme-bar |
Cet élément contient le texte. Vous serez en mesure de modifier :
|
Danube
Mississippi |
| .walkme-question-mark |
Cet élément contient le point d'interrogation sur le côté gauche. Le point d'interrogation lui-même est un caractère et peut donc être conçu en utilisant :
- font-color
- font-size
- font-family
- width
- padding
|
Colorado |
| .walkme-arrow |
Cet élément contient la flèche à droite du texte. La position par défaut est absolue. La flèche est un caractère et peut donc être conçue en utilisant :
- font-color
- font-size
- font-family
- right & bottom
|
Mississippi |
| #walkme-player |
Le widget du triangle Zambezi est une image. Pour changer sa couleur, une nouvelle image doit être conçue, téléchargée et elle doit remplacer l'image existante :
background-image: url('https://knowledge.walkme.com/download/thumbnails/6915638/puppy.png') !important; |
Zambezi |
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 (publier). Ces modifications comprennent les modifications qui sont apportées aux éléments suivants, et bien plus encore :
Cela se produit car 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 globaux, 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 une « Publication des paramètres » 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.
Vidéos conseils du mardi
Pour voir plus de vidéos conseils du mardi sur WalkMe World, cliquez ici.
