Personnaliser le Menu WalkMe à l’aide du CSS
Last Updated novembre 18, 2022
Brief Overview
You can customize every aspect of the WalkMe Menu with the CSS editor using the steps listed below.
To customize the Menu using the default options, view the WalkMe Player Menu: Getting Started Guide.
Before you get started, be sure to reference this article that introduces CSS in the menu.
Access the CSS Customization Panel
- Click Customize in the WalkMe Editor.
- Click the CSS tab.
- Enter the custom CSS in the CSS editor. You can find commonly used custom CSS below.
- Replace highlighted sections in the CSS below with your customizations.
| /* Menu */ /* Side Border aka left stripe */ 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; } |
Right Side Bar (for text menus with right to left text, like Hebrew)
| /* Side Border aka right side*/ (If menu in Hebrew/Arabic/etc.) 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: red !important; } |
Customize Search Button Color
Search Button Static Color
| /* Search Box */ 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; } |
Search Button Hover Color
| /* Search Box Hover – choose a different color, slightly brighter or darker */ 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: red !important; } |
Search Button Clicked Color
| /* Search Box Clicked */ 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: red !important; } |
Customize Progress Bar Color
| /* Progress Bar – This is usually a lighter color */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-progress-bar-inner, div.walkme-menu.walkme-penguin .walkme-override div.walkme-progress-bar-inner { background-color: LightCyan !important; } |
Customize Icons Color
| /* Deployables Icons */ 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; } |
Customize Deployable Name on Hover
| /* Deployable Name on Hover */ 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; } |
Customize Deployable Row on Hover
| /* Deployable Row on Hover – Choose a different color, preferably similar to the main color but lighter */ div.walkme-menu.walkme-penguin.walkme-override div.walkme-activatable:hover, div.walkme-menu.walkme-penguin .walkme-override div.walkme-activatable:hover { background-color: red !important; } |
Customize Selected Tab
| /* Selected Tab */ 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; } |
Customize Category Color
| /* Category */ 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: red !important; } |
Category Name on Hover
| /* Category Name on Hover – You can choose a different color or leave it the same */ 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; } |
Category Row on Hover
| /* Category Row on Hover – Choose a different color, preferably similar to the main color but lighter */ 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: red !important; } |
Category Arrow
| /* Arrow 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, 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; } |
Category Item Names
| /* Category Item Names */ 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; } |
Other Hovers
| /* Other Hovers – This Might work better with an even lighter version of the hover color */ 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 { background-color: red !important; } |
Customize Open a Ticket Link Color
| /* Open a Ticket Link Color */ div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket, div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket { color: red !important; } |
Open Ticket Link Hover
| /* Open a Ticket Link Hover Color */ 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; } |
Customize Question Mark Color on Help tab
| /* Question Mark Color */ .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; } |
Customize Check Mark Color on Tasks tab
| /* Check Mark Color */ .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;} |
Customize Menu Title Color
| /*Changing Menu Title Color (e.g. How can we help you?) */ #walkme-title { color: xxxxxxx !important; } |
Customize the WalkMe Widget
The custom CSS will vary depending on which WalkMe Widget type you are using and customizing. Find the WalkMe widget that you are using below.
Mississippi
| /* Mississippi */ div.walkme-player.walkme-mississippi.walkme-override div.walkme-bar { background-color: red !important; } |
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; } |
Fill in all of 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; } |
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; } |
Zambezi
The Zambezi triangle widget is an image. In order to change its color, a new image should be designed, uploaded and replace the existing image
| /* Zambezi – new 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; } |
Before
After
Cet article a-t-il été utile?
Oui
Non
Merci pour votre avis!
