Support
Welcome to WalkMe support

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

Personnaliser le Menu WalkMe à l’aide du CSS

Last Updated juin 13, 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

  1. Cliquez sur Modifier le CSS global dans le menu des paramètres de l'éditeur WalkMe
  2. Saisissez le CSS personnalisé dans l'Éditeur CSS
  3. Remplacez les sections surlignées dans le CSS ci-dessous par vos personnalisations
Remarque

Tout le CSS fourni ci-dessous est pour le menu de style penguin (#walkme-menu.walkme-penguin .walkme-tile).

Personnaliser le menu WalkMe Color

/* 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.walkme-penguin.walkme-california.walkme-theme-white-blue .walkme-search-box-button .walkme-search-box-button-image{
display: none !important;
}

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 */

#walkme-menu .walkme-activatable:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name,

#walkme-menu .walkme-category:hover > .walkme-deployable-row > .walkme-text > .walkme-deployable-name {

couleur : #f882bd !important;

}

Largeur de la catégorie

/* Largeur de la catégorie */ - Définissez la largeur préférée et supprimez les ellipses

#walkme-menu .walkme-deployable-name {
text-overflow : aucun !important;
}

#walkme-menu .walkme-text {
width: 300px !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;
}

Remarque

Ce CSS ne fonctionne pas si le widget Colorado est défini sur le schéma de couleurs Black&Blue.

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

Remarque

  • Le widget du triangle Zambezi est une image - Afin de modifier sa couleur, une nouvelle image doit être créée et téléchargée pour remplacer l'image existante
  • Assurez-vous que la classe de position correcte est choisie ('.walkme-position-minor-right_corner')

Cet article a-t-il été utile?

Merci pour votre avis!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×