Personnaliser le Menu WalkMe à l’aide du CSS
Last Updated avril 8, 2024
Aperçu rapide
Vous pouvez personnaliser chaque aspect du Menu WalkMe avec l'Éditeur CSS, à l'aide des étapes énumérées ci-dessous.
Pour personnaliser le Menu à l'aide des options par défaut, consultez le Menu du lecteur WalkMe : Premiers pas.
Avant de commencer, assurez-vous de référencer cet article qui introduit le CSS dans le menu.
Comment ça marche
- Cliquez sur Personnaliser dans le menu dans l'Éditeur WalkMe
- Cliquez sur CSS
- Saisissez le CSS personnalisé dans l'Éditeur CSS
- Remplacez les sections surlignées dans le CSS ci-dessous par vos personnalisations
Personnaliser
| /* Menu */ /* Bordure latérale alias la bande gauche */ div.walkme-menu.walkme-penguin.walkme-override.walkme-direction-ltr div.walkme-main div.walkme-menu.walkme-penguin .walkme-override.walkme-direction-ltr div.walkme-main { border-left-color: red !important; } |
Barre latérale droite (pour les menus de texte dans les langues avec du texte de droite à gauche)
| /* Bordure latérale alias côté droit*/ (Si le menu est en hébreu/Arabe/etc.) div.walkme-menu.walkme-penguin.walkme-override.walkme-direction-rtl div.walkme-main, iv.walkme-menu.walkme-penguin .walkme-override.walkme-direction-rtl div.walkme-main { border-right-color: red !important; } |
Texte « Aide »
#walkme-tabs .walkme-first-tab .walkme-tab-button-text {
color: *color* !important;
}
Texte « Actions »
#walkme-main .walkme-category>.walkme-deployable-row .walkme-text .walkme-name {
color: *color* !important;
}
Couleur du titre du menu
| /*Modification de la couleur du titre du menu (« Comment pouvons-nous vous aider ? ») */ #walkme-title { color: xxxxxxx !important; } |
Personnaliser la barre de recherche
Modifier la couleur statique du bouton de recherche
| /* Zone de recherche */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button, div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button { background: red !important; } |
Modifier la couleur du survol du bouton de recherche
| /* Survol de la zone de recherche - choisissez une autre couleur, un peu claire ou un peu plus foncée */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button:hover, div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button:hover { rouge background-color: red !important; } |
Modifier la couleur du bouton de recherche
| /* Clic sur la zone de recherche */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-search-box-button:active, div.walkme-menu.walkme-penguin .walkme-override div.walkme-search-box-button:active { rouge background-color: red !important; } |
Supprimer l'icône de la loupe
|
/* Supprimer l'icône de recherche */ #walkme-menu.walkme-menu. |
Personnaliser la barre de progression
Modifier la couleur
| /* Barre de progression - C'est généralement une couleur plus claire */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-progress-bar-inner, iv.walkme-menu.walkme-penguin .walkme-override div.walkme-progress-bar-inner { background-color: LightCyan !important; } |
Personnaliser les éléments du menu WalkMe
Couleur de l'icône
| /* Icônes d'élément WalkMe */ div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-override div.walkme-deployable-icon.walkme-override, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-override div.walkme-deployable-icon.walkme-override, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-override div.walkme-deployable-icon.walkme-override, div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-override div.walkme-deployable-icon.walkme-override { color: red !important; } |
Nom de l'élément sur Survoler
| /* Nom de l'élément WalkMe sur le survol */ div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > div.walkme-deployable-name, div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > div.walkme-deployable-name { color: red !important; } |
Ligne d'élément sur Survoler
| /* Rangée déployable sur le survol - Choisissez une autre couleur, de préférence similaire à la couleur principale mais plus claire */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable:hover, div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable:hover { rouge background-color: red !important; } |
Catégorie Couleur
| /* Categorie */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name, div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name, div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name, iv.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name { color: red !important; } |
Nom de la catégorie sur Survoler
| /* Nom de la catégorie sur le survol - Vous pouvez choisir une autre couleur ou garder la même */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name, div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name, div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name, div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-text > .walkme-name { color: red !important; } |
Ligne de catégorie sur Survoler
| /* Rangée de catégorie sur le survol - Choisissez une autre couleur, de préférence similaire à la couleur principale mais plus claire */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-category > .walkme-deployable-row:hover, div.walkme-menu.walkme-penguin.walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover, div.walkme-menu.walkme-penguin .walkme-override div.walkme-category > .walkme-deployable-row:hover, div.walkme-menu.walkme-penguin .walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover { rouge background-color: red !important; } |
Catégorie Flèche
| /* Icône de la flèche */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon, div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon, div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon, div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row:hover > .walkme-deployable-icon { color: red !important; } |
Noms d'élément de catégorie
| /* Noms des éléments de la catégorie */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-deployable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text> .walkme-deployable-name, div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name, div.walkme-menu.walkme-penguin .walkme-override div.walkme-deployable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name, div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category.walkme-opened .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name { color: red !important; } |
Personnaliser l'intégration du centre d'aide
Ouvrez une couleur du lien du ticket
| /* Couleur du lien pour Ouvrir un ticket */ div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket, div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket { color: red !important; } |
Survoler le lien du ticket
| /* Couleur du lien de survol pour Ouvrir un ticket */ div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket:hover , div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket:hover { color: red !important; } |
Personnaliser les onglets du menu WalkMe
| /* Onglet sélectionné */ div.walkme-menu.walkme-penguin.walkme-override .walkme-tabs .walkme-tab-button.walkme-tab-button-selected span.walkme-tab-button-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-tabs .walkme-tab-button.walkme-tab-button-selected span.walkme-tab-button-text { color: red !important; } |
Personnaliser la couleur du point d'interrogation sur l'onglet Aide
| /* Couleur du point d'interrogation */ .walkme-tab-button-selected span.walkme-tab-button-image.walkme-icon-font.walkme-contains-walkthru.walkme-contains-shuttle.walkme-contains-content.walkme-visible.walkme-search.walkme-search-providers.walkme-override.walkme-css-reset{ color: red !important; } |
Vérifier la couleur de la marque sur l'onglet Tâches
| /* Couleur de la coche */ .walkme-tab-button-selected span.walkme-tab-button-image.walkme-icon-font.walkme-contains-task.walkme-visible.walkme-progress-bar.walkme-override.walkme-css-reset{ color: red !important;} |
Survoler la couleur
| /* Autres survols - Cela pourrait mieux fonctionner avec une teinte plus que la couleur de survol */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-tabs .walkme-tab-button:hover, div.walkme-menu.walkme-penguin .walkme-override div.walkme-tabs .walkme-tab-button:hover, div.walkme-menu.walkme-penguin.walkme-override div.walkme-category > .walkme-deployable-row:hover .walkme-deployable-icon, div.walkme-menu.walkme-penguin.walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover .walkme-deployable-icon, div.walkme-menu.walkme-penguin .walkme-override div.walkme-category > .walkme-deployable-row:hover .walkme-deployable-icon, div.walkme-menu.walkme-penguin .walkme-override div.walkme-category.walkme-opened > .walkme-deployable-row:hover .walkme-deployable-icon { rouge background-color: red !important; } |
Personnaliser le Widget WalkMe
Modifier la couleur du widget Mississippi
| /* Mississippi */ div.walkme-player.walkme-mississippi.walkme-override div.walkme-bar { rouge background-color: red !important; } |
Modifier la couleur du widget carré Colorado
| /* Colorado */ div.walkme-player.walkme-colorado.walkme-override div.walkme-question-mark, div.walkme-player.walkme-colorado.walkme-override * div.walkme-question-mark { background: red !important; } |
Modifier ? Couleur
| /* Widget ? Couleur */ .walkme-player.walkme-colorado.walkme-allenby .walkme-question-mark:before, .walkme-player.walkme-colorado.walkme-allenby * .walkme-question-mark:before { color: white !important;} |
Remplir tout le widget Colorado
| /*Full Color Colorado*/ #walkme-player .walkme-in-wrapper.walkme-override.walkme-css-reset border-color: #5765D1 !important; } .walkme-player.walkme-colorado.walkme-theme-black-blue .walkme-question-mark.walkme-override.walkme-css-reset { background-color: #5765D1 !important } .walkme-player.walkme-colorado.walkme-theme-black-blue .walkme-in-wrapper, .walkme-player.walkme-colorado.walkme-theme-black-blue * .walkme-in-wrapper { background-color: #5765D1 !important; } .walkme-player.walkme-colorado.walkme-theme-black-blue, .walkme-player.walkme-colorado.walkme-theme-black-blue * { background-color: #5765D1 !important; } .walkme-player.walkme-colorado .walkme-title.walkme-override.walkme-css-reset, .walkme-player.walkme-colorado .walkme-title.walkme-override.walkme-css-reset * { background-color: #5765D1 !important; } |
Modifier l'image d'arrière-plan de Californie
#walkme-player.walkme-california {
background-image: url('urlHere') !important;
}
Modifier la couleur du widget Danube
| /* Danube */ div.walkme-player.walkme-danube.walkme-override div.walkme-bar, div.walkme-player.walkme-danube.walkme-override * div.walkme-bar { background: red !important; } |
Modifier l'image du widget Zambezi
| /* Zambezi - nouvelle image */ div.walkme-player.walkme-zambezi.walkme-override.walkme-position-major-bottom.walkme-position-minor-right_corner { background-image: url('insert your URL here') !important; } |
Avant
Après
Cet article a-t-il été utile?
Oui
Non
Merci pour votre avis!