Last Updated Januar 23, 2024
Kurzübersicht
Mit Cascading Style Sheets (CSS) können Sie das Erscheinungsbild einer Sprechblase anpassen, einschließlich Layout, Farben und Schriftarten.
Die CSS-Funktion in WalkMe ermöglicht die vollständige Anpassung von Walk-Thrus und Walk-Thru Schritten. Bevor Sie die Regeln im Fenster „Customize CSS“ (CSS anpassen) eingeben, können Sie überprüfen, ob die CSS-Regel funktioniert, indem Sie sie in die Registerkarte „Custom CSS“ (Benutzerdefinierte CSS) im Flow Tracker einfügen.
🎓 Digital Adoption Institute
Anwendungsfälle
Zu den Anwendungsfällen von CSS gehören die folgenden:
- Einfügen eines Bildes oder Logos in eine Sprechblase
- Einrichten eines speziellen Welcome-ShoutOuts für Ihre Website
- Ändern der Breite von Pfeilen oder Entfernen von Pfeilen aus einer Sprechblase
- Ändern des Textes einer Schaltfläche Next (Weiter)
Funktionsweise
CSS ist eine Stylesheet-Sprache, die zur Beschreibung der Formatierung eines in einer Auszeichnungssprache geschriebenen Dokuments verwendet wird. Wenn Sie CSS schreiben, müssen Sie sich auf die verschiedenen Komponenten oder Elemente von Sprechblasen beziehen, die in WalkMe Apps zu finden sind. Während der Eingabe in das Fenster „Custom CSS“ zeigt WalkMe Optionen für die automatische Vervollständigung von Selektoren, Eigenschaften und Werten an.
CSS kann lokal über den Rich Text Editor oder global in der Admin-Leiste über das Menü „Customize“ hinzugefügt werden. Bevor Sie die Regeln im Fenster Customize CSS eingeben, testen Sie sie in der Registerkarte Custom CSS im Flow Tracker.
Stylin' mit einem CSS Webinar erhalten
Konfigurieren von Sprechblasenkomponenten
Jede Sprechblase enthält eine Reihe von Komponenten (Elemente), die mit CSS angepasst werden können. Sie können z. B. den Titelbereich einer Sprechblase mit dieser Klasse gezielt ansteuern: .walkme-custom-balloon-title (Nachfolgend finden Sie eine vollständige Liste der Klassen).
Globale vs. lokale Regeln für Sprechblasen
CSS kann global oder lokal angewendet werden. Lokales CSS hat Vorrang vor allen anderen Designs und kann über den Rich Text Editor in der Registerkarte Interaction angewendet werden.
Auf Global CSS kann über das Dropdown-Menü „Settings“ im Editor zugegriffen werden.
Die Verwendung des lokalen CSS-Editors (Rich Text Editor) macht es einfach, ein einzelnes ShoutOut anzupassen.
Wenn Sie ein einzelnes ShoutOut auf globaler Ebene anpassen, müssen Sie die ID* des ShoutOuts vor der Klasse eingeben, die den Sprechblasenabschnitt identifiziert.
Beispiel auf lokaler Ebene: .walkme-custom-balloon-title
Beispiel auf globaler Ebene: #walkme-balloon-XXXXX.walkme-custom-balloon-title)
Tipp
Für Walk-Thrus kann die ID im Menü „Walk-Thru Settings“ (Walk-Thru-Einstellungen) unter „Advanced Settings“ (Erweiterte Einstellungen) gefunden werden:
Verwenden von „!Important“
Standardmäßig überschreibt das WalkMe-Themendesign alle anderen Designänderungen an einer Sprechblase oder einem Walk-Thru. Damit CSS angewendet werden kann, muss die CSS-Regel !important enthalten, um sicherzustellen, dass sie das standardmäßige Styling außer Kraft setzt.
Beispiel:
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}
Konfigurierbare Komponente
|
Verschiedene |
Beispiele für bearbeitbare Attribute |
| 1 |
.walkme-custom-side-border |
Dieses Element ist der linke Sprechblasenrand:
|
| 2 |
.walkme-custom-balloon-separator |
Dieses Element ist das Trennzeichen im unteren Drittel der Sprechblase:
|
| 3 |
.walkme-custom-balloon-title |
Dieses Element ist die Sprechblasenkopfzeile:
- text-align
- font-color
- font-size
- font-family
- Textabstand
- Rand
|
| 4 |
.walkme-custom-balloon-content |
Dieses Element ist der Sprechblasentext:
- text-align
- font-color
- font-size
- font-family
- Textabstand
- Rand
|
| 5 |
.walkme-custom-balloon-subtext |
Dieses Element ist die Schrittnummer:
- text-align
- font-color
- font-size
- font-family
- Anzeige
|
| 6 |
.walkme-custom-balloon-back-button |
Dieses Element ist die Zurück-Schaltfläche:
- Farbe
- font-size
- font-family
- Breite
- Höhe
- Hintergrund
- border-radius
|
| 7 |
.walkme-custom-balloon-next-button |
Dieses Element ist die Weiter-Schaltfläche:
- Farbe
- font-size
- font-family
- Breite
- Höhe
- Hintergrund
- border-radius
|
Die häufigsten CSS-Anpassungen
.walkme-custom-balloon-close-button {
display:none !important;
}
Entfernen Sie die Seitenränder einer Sprechblase
.walkme-custom-side-border{
display: none !important;
}
Ändern Sie die Farbe des Sprechblasenrandes
.walkme-custom-side-border{
background-color: red !important;
}
Ändern Sie die Hintergrundfarbe der Sprechblase
#walkme-balloon-XXXXXXX .walkme-custom-balloon-content-wrapper{
background-color: green !important;
}
Verändern Sie die Breite einer Sprechblase
#walkme-balloon-xxxxxxx {
width: 300px !important;
min-width: 0 !important;
padding: 10px !important;
}
Ändern Sie die Breite einer ShoutOut-Sprechblase
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
Entfernen Sie einen Pfeil aus der Sprechblase
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}
Entfernen Sie Schrittzahlen aus einer Sprechblase
.walkme-custom-balloon-subtext {
display: none !important;
}
Ändern Sie den Text des Buttons „Next“
Anmerkung
Die Einstellungen für Text & mehrere Sprachen sind nicht mehr in Insights verfügbar und können stattdessen über die Seite Übersetzungen in der WalkMe Console auf console.walkme.com aufgerufen werden. Mehr erfahren.
div#walkme-balloon-xxxxxxx
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text{
font-size: 0 !important;
}
div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text:before {
content: 'new text' !important;
visibility: visible !important;
font-size: 12px !important;
}
Ändern Sie den Text des Buttons „Back“
button.walkme-custom-balloon-button.walkme-custom-balloon-weak-button.walkme-custom-balloon-back-button.walkme-action-back.walkme-click-and-hover span.walkme-custom-balloon-button-text
Ändern Sie den Text des Buttons „Done“
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-done-button.walkme-action-done.walkme-click-and-hover span.walkme-custom-balloon-button-text
Ändern Sie die WalkMe-Schriftart überall
#walkme-menu *,
#walkme-player *,
.walkme-custom-balloon-outer-div *,
.wm-shoutout *,
.walkme-survey-balloon *,
.walkme-tooltip-outer-div *,
.walkme-custom-launcher-outer-div,
.walkme-icon-image-div.walkme-launcher-image-div * {
font-family: "Roboto",Tahoma,Arial,Verdana,sans-serif !important; /* Add desired Font-Family rule here*/
}
Note
Die Regel der Schriftfamilie muss auf jeder Seite codiert sein, auf der WalkMe implementiert ist. Wenn die Schriftartenregel nicht auf einer bestimmten Seite codiert ist, kann WalkMe die Schriftart nicht korrekt abrufen und rendern.
Ändern Sie die Schriftart eines Launchers
.walkme-icon-image-div.walkme-launcher-image-div {
font-family: /
*your font here*/ !important;
}
Ändern Sie die Schriftart einer Sprechblase
.walkme-custom-balloon-title,
.walkme-custom-balloon-content,
.walkme-custom-balloon-button-text {
font-family: /
*your font here*/ !important;
}
#walkme-menu.walkme-penguin,
#walkme-main .walkme-title {
font-family: /*your font here*/ !important;
}.walkme-menu.walkme-penguin .walkme-icon {
font-family: /*your font here*/ !important;
}
Ändern Sie die Schriftart eines SmartTips
.walkme-tooltip-content-wrapper .walkme-tooltip-content {
font-family: /*your font here*/ !important;
}
.walkme-tooltip-smarttip-XXXXX{
Display: none !important;
}div.walkme-custom-tooltip-arrow-top.walkme-custom-tooltip-item-YYYYY{
Display: none !important;
}
Wenden Sie Änderungen des Z-Index auf alle Walk-Thru-Sprechblasen an
div.walkme-custom-walkthru-xxxxx.walkme-custom-simple-step {
z-index:0 !important;}
div.walkme-custom-walkthru-xxxxx.walkme-custom-balloon-arrow {
z-index:0 !important;}
Kategorien öffnen/erweitern
Anmerkung
Irland wird nicht unterstützt.
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";
}
Find & Replace Shortcuts (Shortcuts suchen und Ersetzen)
- Suchen: Strg-F / Cmd-F (drücken Sie die Eingabetaste, um zum Nächsten zu gelangen, die Umschalttaste, um zum Vorherigen zu gelangen)
- Ersetzen: Strg-R / Cmd-R
- Zur Zeile springen: Strg-J / Cmd-J
Sehen Sie sich unten eine kurze Demo an:
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 (Veröffentlichen) nicht angezeigt. 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 die Funktion „Einstellungen veröffentlichen“ durch, wie nachfolgend beschrieben:
- 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.
Hinweis: Falls ein Fehler auftritt, erscheint die folgende Validierungsmitteilung in der CSS-Konsole, nachdem Sie auf Speichern klicken.
Auch für HTML verfügbar, falls aktiviert – Zugriff von Ihrem WalkMe-Kontakt anfordern.
Verwandte Ressourcen
- Erfahren Sie, wie Sie den Player und die Sprechblasen in WalkMe anpassen können, ohne CSS zu verwenden.
- Verwenden Sie den Flow Tracker zur Vorschau von CSS.
Video mit Tipps und Tricks zu CSS
