Customize the WalkMe Menu Using CSS
Last Updated April 8, 2024
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.
How It Works
- Click Edit global CSS in the WalkMe Editor settings menu
- Enter the custom CSS in the CSS editor
- Replace highlighted sections in the CSS below with your customizations
Customize
| /* 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 in languages with right to left text)
| /* 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; } |
"Help" Text
#walkme-tabs .walkme-first-tab .walkme-tab-button-text {
color: *color* !important;
}
"Actions" Text
#walkme-main .walkme-category>.walkme-deployable-row .walkme-text .walkme-name {
color: *color* !important;
}
Menu Title Color
| /*Changing Menu Title Color ("How can we help you?") */ #walkme-title { color: xxxxxxx !important; } |
Customize Search Bar
Change 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; } |
Change 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; } |
Change 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; } |
Remove Magnifying Glass Icon
|
/* Remove Search Icon */ #walkme-menu.walkme-menu. |
Customize Progress Bar
Change 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 WalkMe Menu Items
Icon Color
| /* WalkMe Item 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; } |
Item Name on Hover
| /* WalkMe Item 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; } |
Item 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; } |
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 */ #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 { color: #f882bd !important; } |
Category Width
|
/* Category Width */ - Set the preferred width and remove the ellipses #walkme-menu .walkme-deployable-name { #walkme-menu .walkme-text { |
Customize Help Center Integration
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 WalkMe Menu Tabs
| /* 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 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; } |
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;} |
Hover Color
| /* 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 the WalkMe Widget
Change Mississippi Widget Color
| /* Mississippi */ div.walkme-player.walkme-mississippi.walkme-override div.walkme-bar { background-color: red !important; } |
Change Colorado Widget Square Color
| /* 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; } |
Change ? Color
| /* Widget ? Color */ .walkme-player.walkme-colorado.walkme-allenby .walkme-question-mark:before, .walkme-player.walkme-colorado.walkme-allenby * .walkme-question-mark:before { color: white !important;} |
Fill in all of Colorado Widget
| /*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; } |
Change California Background Image
#walkme-player.walkme-california {
background-image: url('urlHere') !important;
}
Change Danube Widget Color
| /* Danube */ div.walkme-player.walkme-danube.walkme-override div.walkme-bar, div.walkme-player.walkme-danube.walkme-override * div.walkme-bar { background: red !important; } |
Change Zambezi Widget 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
Was this article helpful?
Yes
No
Thanks for your feedback!