Last Updated Februar 11, 2024
Bitte beachten Sie, dass dieser Artikel nur ein grundlegendes Verständnis der Verwendung von CSS mit dem WalkMe-Menü und -Widget vermittelt. Es wird empfohlen, sich vorab Wissen über die Verwendung von CSS anzueignen.
Kurzübersicht
Mit Cascading Style Sheets (CSS) können Sie das Erscheinungsbild eines Dokuments anpassen, einschließlich solcher Elemente wie Layout, Farben und Schriftarten. Wir können CSS verwenden, um eine erweiterte Anpassung an das WalkMe-Menü vorzunehmen.
CSS ist eine Stylesheet-Sprache, die zur Beschreibung der Formatierung eines in einer Auszeichnungssprache geschriebenen Dokuments verwendet wird. Beim Schreiben von CSS müssen Sie sich auf die verschiedenen Komponenten oder Elemente des WalkMe-Menüs beziehen.
Während der Eingabe in das Fenster Custom CSS zeigt WalkMe Optionen für die automatische Vervollständigung von Selektoren, Eigenschaften und Werten an. Globales CSS wird im Menü Customize hinzugefügt, auf das über die Admin-Leiste zugegriffen wird.
Bevor Sie die Regeln auf der Registerkarte CSS des Menüs Customize (Anpassen) eingeben, können Sie überprüfen, ob die CSS-Regel funktioniert, indem Sie sie auf der Registerkarte Custom CSS (Benutzerdefinierte CSS) im Flow Tracker einfügen.
Funktionsweise
Das WalkMe Menü kann nur global angepasst werden, da es nur ein Menü gibt. Jede CSS-Regel für das Menü muss mit der folgenden ID beginnen: #walkme-menu. Diese Regel kann durch den Typ, d. h. #walkme-menu.walkme-penguin, weiter eingegrenzt werden. Dieser Kette können zusätzliche Komponenten des Players hinzugefügt werden.
Beispiel:
#walkme-menu.walkme-penguin .walkme-title (siehe unten eine vollständige Liste der Klassen).
Verwenden von !important
Standardmäßig überschreibt das WalkMe-Themendesign alle anderen Designänderungen am Menü. Damit CSS richtig angewendet werden kann, muss die CSS-Regel !important enthalten, um sicherzustellen, dass sie das standardmäßige Styling außer Kraft setzt.
Beispiel:
.walkme-out-wrapper { color: #000 !important; }
Es gibt mehrere verschiedene Widget-Stile und Themen, aus denen Sie auf der Registerkarte Player anpassen im Menü Customize (Anpassen) wählen können. Wenn Sie CSS hinzufügen, sind einige der folgenden Klassen für alle Menüoptionen von Bedeutung, während andere nur in einigen erscheinen.
| Verschiedene |
Bearbeitbare Attribute |
Anwendbare Menüstile |
| .walkme-out-wrapper |
Dieses Element umgibt das gesamte WalkMe-Menü. Sie können Folgendes bearbeiten:
|
Danube
Colorado
Mississippi |
| .walkme-in-wrapper |
Dieses Element umgibt das gesamte WalkMe-Menü. Sie können Folgendes bearbeiten:
- Grenzradius
- Höhe und Breite
- Hintergrund
- Grenze
- border-radius
- box-shadow
|
Danube
Colorado
Mississippi |
| .walkme-title |
Dieses Element enthält den Text. Die Standardposition ist absolut. Sie können Folgendes bearbeiten:
- font-color
- font-size
- font-family
|
Danube
Colorado
Mississippi |
| .walkme-bar |
Dieses Element enthält den Text. Sie können Folgendes bearbeiten:
|
Danube
Mississippi |
| .walkme-question-mark |
Dieses Element enthält das Fragezeichen auf der linken Seite. Das Fragezeichen selbst ist ein Zeichen und kann daher gestaltet werden mit:
- font-color
- font-size
- font-family
- Breite
- Textabstand
|
Colorado |
| .walkme-arrow |
Dieses Element enthält den Pfeil rechts vom Text. Die Standardposition ist absolut. Der Pfeil ist ein Zeichen und kann daher gestaltet werden mit:
- font-color
- font-size
- font-family
- rechts und unten
|
Mississippi |
| #walkme-player |
Das Zambezi-Dreieck-Widget ist ein Bild. Um seine Farbe zu ändern, sollte ein neues Bild entworfen, hochgeladen und das bestehende Bild ersetzt werden:
background-image: url('https://knowledge.walkme.com/download/thumbnails/6915638/puppy.png') !important. |
Zambezi |
Veröffentlichen Sie Änderungen in CSS
Damit Änderungen im CSS live werden, müssen Sie sie veröffentlichen.
Einige Änderungen, die auf Ihr Konto angewendet werden können, werden im Menü Publish nicht widergespiegelt. Dazu gehören Änderungen, die unter anderem an den folgenden Elementen vorgenommen werden:
Das liegt daran, dass jede Änderung in Ihrem Konto, die sich nicht auf ein bestimmtes WalkMe-Element bezieht, auf Ihre Umgebung übertragen wird, sobald Sie neue oder bestehende Inhalte veröffentlichen. Wenn Sie also vor kurzem Änderungen an einem Ihrer globalen Segmente vorgenommen und dann einen nicht damit zusammenhängenden Walk-Thru veröffentlicht haben, werden die an Ihrem Segment vorgenommenen Änderungen ebenfalls veröffentlicht.
Um Änderungen zu veröffentlichen, die Sie am CSS vorgenommen haben, führen Sie Funktion „Einstellungen veröffentlichen“, wie folgt, durch:
- Klicken Sie in der Admin-Leiste auf Publish.
- Öffnen Sie die Registerkarte Publish.
- Wenn Sie nur Änderungen an CSS veröffentlichen, wählen Sie alle Elemente aus.
- Klicken Sie auf Publish.
Tipp – Dienstag-Videos
