Rechercher n'importe quoi

CSS pour le Menu WalkMe

Last Updated août 20, 2025
Share Article Copy link to clipboard

Applies to WalkMe packages

Pour les clients Pour les employés DAP Premium FedRAMP Canada

Aperçu rapide

L'utilisation de feuilles de style en cascade (CSS) vous permet de personnaliser les éléments du menu, y compris la présentation, les couleurs et les polices.

Lors de l'écriture de CSS, les références aux différents composants ou éléments du menu WalkMe sont essentielles. Cet article donne un aperçu des options CSS disponibles pour personnaliser ces éléments avancés

Pour personnaliser le menu à l'aide des options par défaut, consultez le Menu du lecteur WalkMe : Premiers pas.

CSS

Comment ça marche

Structure du Menu WalkMe

Le menu WalkMe ne peut être personnalisé que globalement.

Toute règle CSS pour le menu doit commencer par l'ID suivant :

  • #walkme-menu

Cette règle peut être encore réduite par le style du menu :

  • #walkme-menu.walkme-penguin

Des composants supplémentaires peuvent être ajoutés à la fin :

  • #walkme-menu.walkme-penguin .walkme-title

Voir la liste complète des cours.

Utilisation d' !important

Par défaut, la conception du thème WalkMe remplace tout autre changement de conception dans la bulle ou l'app.

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-menu.walkme-penguin .walkme-title {

color: #000 !important;

}

Modifier le CSS global

  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
Conseil

Tout le CSS fourni ci-dessous est pour le menu de style penguin sauf si cela est noté.

Composants de menu personnalisables

Vous pouvez choisir parmi plusieurs styles de widgets et de menus dans l'onglet Personnaliser le lecteur.

Lors de l'ajout de CSS, certaines des classes suivantes s'appliquent à toutes les options de menu, tandis que d'autres n'apparaissent que dans certaines d'entre elles.

div Fonctionnalités modifiables Styles de menu pris en charge
.walkme-out-wrapper Cet élément entoure l'ensemble du menu WalkMe. Vous serez en mesure de modifier :
  • border-radius
 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 :
  • background-color
  • width
 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

Personnaliser le menu WalkMe Color

Vidéo de conseils et d'astuces CSS

Modifier la couleur de la bordure du menu (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 : xxxxxxx !important ;

}

Modifier la couleur de la bordure du menu (bande de droite - pour les menus texte dans les langues où le texte est écrit de droite à gauche)

div.walkme-menu.walkme-penguin.walkme-override.walkme-direction-rtl div.walkme-main, div.walkme-menu.walkme-penguin .walkme-override.walkme-direction-rtl div.walkme-main {

border-right-color : xxxxxxx !important ;

}

Modifier la couleur du texte « Aide »

#walkme-tabs .walkme-first-tab .walkme-tab-button-text {

color: xxxxxxx !important;

}

Modifier la couleur du texte « Actions »

#walkme-main .walkme-category>.walkme-deployable-row .walkme-text .walkme-name {

color: xxxxxxx !important;

}

Modifier la couleur du menu ("Comment pouvons-nous vous aider ? ")

#walkme-title {

color: xxxxxxx !important;

}

Modifier la couleur de la barre de progression

/* Couleur de la barre de progression */
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 la barre de recherche

Modifier la couleur du bouton de recherche (statique)

/* 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: xxx xxx !important ;

}

Modifier la couleur du bouton de recherche (en survol)

/* survol de la boîte de recherche*/
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 {

background-color: xxx !important ;

}

Modifier la couleur du bouton de recherche (une fois cliqué)

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

background-color: xxx !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;

}

Modifier la couleur du texte de recherche

div#walkme-menu.walkme-menu.walkme-penguin.walkme-california.walkme-theme-white-blue input.walkme-search-box {

color: xxxxxxx !important;

}

Personnaliser le contenu du menu

Modifier la couleur de l'icône WalkMe

/* 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: xxxxxxx !important;

}

Changer l'icône de la bouée de sauvetage du menu

div#walkme-menu.walkme-menu.walkme-penguin.walkme-california.walkme-theme-white-blue .walkme-title:before {

content: "" !important;
background-image: url(xxxxxxx) !important;
background-size: 30px !important;
background-repeat: no-repeat !important;
background-position : center !important ;
display : inline-block !important ;
largeur : 30px ! important ;
hauteur : 30px ! important ;

}

Modifier la couleur des noms d'éléments (en survolant)

/* 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: xxxxxxx !important;

}

Modifier la couleur de la ligne d'élément (en survolant)

/* Ligne d'élément sur Hover*/
div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable:hover,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable:hover {

background-color: xxx !important ;

}

Modifier la couleur du nom de la catégorie

/* 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,
div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable.walkme-category > .walkme-deployable-row > .walkme-text > .walkme-name {

color: xxxxxxx !important;

}

Modifier la couleur du nom de la catégorie (en survolant)

/* Nom de la catégorie sur Hover*/
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-deployable.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: xxxxxxx !important;

}

Changer la couleur de la rangée de catégorie (au survol)

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

background-color: xxx !important ;

}

Modifier la couleur de la flèche de catégorie

/* 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-deployable.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: xxxxxxx !important;

}

Ouvrir / développer les catégories

div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable {
display: block !important;
}

div.walkme-menu.walkme-penguin.walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-category.walkme-opened .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-category .walkme-activatable.walkme-invisible,
div.walkme-menu.walkme-penguin .walkme-override .walkme-category .walkme-activatable.walkme-invisible {
display: none !important;
}

div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable {
border-bottom: none !important;
}

div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon,
div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-deployable-icon {
height: 20px !important;
padding-top: 4px !important;
margin-left: 12px !important;
width: 26px !important;
}

div.walkme-menu.walkme-penguin.walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin.walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-deployable.walkme-category.walkme-override .walkme-activatable .walkme-text, div.walkme-menu.walkme-penguin .walkme-override .walkme-activatable.walkme-category.walkme-override .walkme-activatable .walkme-text {
padding: 0 !important;
}

div.walkme-menu.walkme-penguin .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category > .walkme-deployable-row > .walkme-deployable-icon:before {
content: "e60a";
}

div.walkme-menu.walkme-penguin .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before, div.walkme-menu.walkme-penguin * .walkme-category.walkme-opened > .walkme-deployable-row > .walkme-deployable-icon:before {
content:"e609";
}

Le style de menu de l'Irlande n'est pas pris en charge.

Modifier la couleur des noms des éléments 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;

}

Modifier la largeur de la catégorie

/* Largeur de la catégorie */

#walkme-menu .walkme-deployable-name {

text-overflow : aucun !important;

}

#walkme-menu .walkme-text {

width: 300px !important;

}

Ajoutez WordWrap pour afficher tout le texte

/*Afficher les noms complets de WalkThru*/

div.walkme-deployable-name.walkme-name.walkme-override.walkme-css-reset {

overflow: visible !important;

}

Ajoutez un logo au lecteur de menu

#walkme-menu #walkme-title : before{

image d'arrière-plan : url('') ! important ;

}

Remarque :

Le logo peut devoir être modifié, par exemple, en termes de taille, de hauteur, de position.

Personnaliser l'intégration du centre d'aide

Modifier la couleur du lien "Ouvrir un 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: xxxxxxx !important;

}

Modifier la couleur du lien « Ouvrir un ticket » (en survolant)

/* 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: xxxxxxx !important;

}

Personnaliser les onglets de menu

Modifier la couleur de l'onglet sélectionné

/* 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: xxxxxxx !important;

}

Modifier la couleur du point d'interrogation de 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: xxxxxxx !important;

}

Modifier la couleur de la coche de 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: xxxxxxx !important;

}

Modifier la couleur du survol

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

Modifier la police d'un Widget

/* Police du widget */

#walkme-menu.walkme-penguin,
#walkme-main .walkme-title {
font-family: /*your font here*/ !important;
}.walkme-menu.walkme-penguin .walkme-icon {

font-family: xxx !important ;

}

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 Colorado (boîte carrée)

/* 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 la couleur du point d'interrogation (? )

/* Widget ? Couleur */
.walkme-player.walkme-colorado.walkme-allenby .walkme-question-mark:before, .walkme-player.walkme-colorado.walkme-allenby * .walkme-question-mark:before {

couleur: white !important ;

}

Modifier la couleur de l'ensemble du 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;
}

Ce CSS ne fonctionnera pas si le widget Colorado est réglé sur le schéma de couleurs Noir et Bleu.

Modifier l'image d'arrière-plan de Californie

#walkme-player.walkme-california {

background-image: url('ajouter l'URL ici') !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('ajouter l'URL ici') !important;

}

Avant

Après

Assurez-vous que la classe de position correcte est choisie ('.walkme-position-minor-right_corner')

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). Il s'agit notamment des modifications apportées aux éléments suivants :

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.

How to Publish Global Settings

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

Oui Non
Oui
Non
Merci pour votre avis!

Applies to WalkMe packages

Pour les clients Pour les employés DAP Premium FedRAMP Canada

Articles similaires

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×