Individuelle Anpassung des WalkMe-Menüs mit CSS
Last Updated April 8, 2024
Kurzübersicht
Sie können jeden Aspekt des WalkMe-Menüs mit dem CSS-Editor anpassen, indem Sie die unten aufgeführten Schritte befolgen.
Wie Sie das Menü mit den Standardoptionen anpassen können, erfahren Sie im WalkMe Player-Menü: Leitfaden für die ersten Schritte.
Bevor Sie beginnen, sollten Sie diesen Artikel im Menü lesen, der CSS einführt.
Funktionsweise
- Klicken Sie im WalkMe Editor auf Customize (Anpassen)
- Klicken Sie auf CSS
- Geben Sie die benutzerdefinierte CSS in den CSS-Editor ein
- Ersetzen Sie hervorgehobene Abschnitte im CSS durch Ihre Anpassungen
anpassen
| /* Menü */ /* Seitenrand oder auch linker Streifen */ 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; } |
Rechte Seitenleiste (für Textmenüs in Sprachen mit Text von rechts nach links)
| /* Seitenrand oder auch rechte Seite*/ (Wenn Menü auf Hebräisch/Arabisch/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; } |
Text „Help“ (Hilfe)
#walkme-tabs .walkme-first-tab .walkme-tab-button-text {
color: *color* !important;
}
Text „Actions“ (Aktionen)
#walkme-main .walkme-category>.walkme-deployable-row .walkme-text .walkme-name {
color: *color* !important;
}
Farbe des Menütitels
| /*Ändern der Farbe des Menütitels („Wie können wir Ihnen helfen?“) */ #walkme-title { color: xxxxxxx !important; } |
Suchleiste anpassen
Statische Farbe der Suchschaltfläche ändern
| /* Suchfeld */ 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; } |
Farbe des Suchbuttons ändern
| /* Suchfeld beim Draufzeigen – wählen Sie eine andere Farbe, etwas heller oder dunkler */ 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; } |
Suchschaltfläche „Angeklickte Farbe“ ändern
| /* Suchfeld angeklickt */ 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; } |
Lupensymbol entfernen
|
/* Suchsymbol entfernen */ #walkme-menu.walkme-menu. |
Fortschrittsleiste anpassen
Farbe ändern
| /* Fortschrittsbalken – Dies ist in der Regel eine hellere Farbe */ 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; } |
WalkMe-Menüfarbe anpassen
Symbolfarbe
| /* WalkMe-Element-Symbole */ 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; } |
Elementname beim Hover
| /* WalkMe-Elementname auf 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; } |
Elementzeile beim Hover
| /* Deployable-Reihe beim Draufzeigen – Wählen Sie eine andere Farbe, möglichst ähnlich der Hauptfarbe, aber heller */ 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; } |
Kategorie-Farbe
| /* Kategorie */ 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; } |
Kategorienname beim Hover
| /* Name der Kategorie beim Draufzeigen – Sie können eine andere Farbe wählen oder sie beibehalten */ 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; } |
Kategorie-Zeile beim Hover
| /* Kategorie-Reihe beim Draufzeigen – Wählen Sie eine andere Farbe, möglichst ähnlich der Hauptfarbe, aber heller */ 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; } |
Kategorie-Pfeil
| /* Pfeil-Symbol */ 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; } |
Kategorie-Elementnamen
| /* Kategorie – Namen der Elemente */ 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; } |
Help-Center-Integration anpassen
Eine Ticketlink-Farbe öffnen
| /* Farbe von „Open a Ticket Link“ */ div.walkme-menu.walkme-penguin.walkme-override .walkme-open-ticket, div.walkme-menu.walkme-penguin .walkme-override .walkme-open-ticket { color: red !important; } |
Ticketlink-Hover öffnen
| /* Farbe von „Open a Ticket Link“ beim Draufzeigen */ 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; } |
WalkMe-Menü-Reiter anpassen
| /* Registerkarte auswählen */ 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; } |
Fragezeichenfarbe auf der Registerkarte „Hilfe“ anpassen
| /* Farbe von Fragezeichen */ .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; } |
Aktivieren Sie „Farbe markieren“ auf der Registerkarte „Aufgaben“
| /* Farbe von Häkchen */ .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-Farbe
| /* Andere Draufzeigevorgänge – Dies könnte mit einer noch helleren Version der Schwebe-Farbe besser funktionieren */ 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; } |
Anpassung des WalkMe-Widgets
Mississippi-Widget-Farbe ändern
| /* Mississippi */ div.walkme-player.walkme-mississippi.walkme-override div.walkme-bar { background-color: red !important; } |
Colorado-Widget-Quadratfarbe ändern
| /* 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; } |
Ändern ? Farbe
| /* 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;} |
Colorado-Widget komplett ausfüllen
| /*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; } |
California-Hintergrundbild ändern
#walkme-player.walkme-california {
background-image: url('urlHere') !important;
}
Danube-Widget-Farbe ändern
| /* 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-Widget-Bild ändern
| /* Zambezi – neues Bild */ div.walkme-player.walkme-zambezi.walkme-override.walkme-position-major-bottom.walkme-position-minor-right_corner { background-image: url('insert your URL here') !important; } |
Vorher
Danach
War dies hilfreich?
Ja
Nein
Vielen Dank für Ihr Feedback!