CSS
Kurzübersicht
Mit Cascading Style Sheets (CSS) können Sie das Erscheinungsbild Ihres WalkMe-Inhalts anpassen, einschließlich Layout, Farben und Schriftarten.
Die CSS-Funktion in WalkMe ermöglicht die Anpassung bestimmter Inhaltstypen, darunter Smart Walk-Thru-Schritte, Umfragen und das WalkMe-Menü.
Stylin' mit einem CSS Webinar erhalten
Anwendungsfälle
Zu den Anwendungsfällen von CSS gehören die folgenden:
- Einfügen eines Bildes oder Logos in eine Sprechblase
- Ä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. Beim Schreiben von CSS müssen Sie sich auf die verschiedenen Komponenten oder Elemente Ihres WalkMe-Inhalts beziehen.
Jedes WalkMe-Element enthält eine Reihe von Komponenten (Elemente), die mit CSS angepasst werden können.
Sie können zum Beispiel den Titelabschnitt einer Sprechblase mit dieser Klasse anvisieren:
- .walkme-custom-balloon-title
Globale und lokale Regeln im Vergleich
CSS kann global oder lokal angewendet werden. Mit der lokalen CSS Console lässt sich ein einzelnes WalkMe-Element leicht anpassen. Wenn Sie die Anpassung auf globaler Ebene vornehmen, müssen Sie die ID des WalkMe-Elements eingeben.
Beispiel auf lokaler Ebene: .walkme-custom-balloon-title
Beispiel auf globaler Ebene: #walkme-balloon-XXXXXXX.walkme-custom-balloon-title
Lokale CSS bearbeiten
- Öffnen Sie das Menü der Elementeinstellungen
- Gehen Sie auf die Registerkarte Interaction
- Klicken Sie auf CSS bearbeiten
- Geben Sie die benutzerdefinierte CSS in die CSS-Konsole ein
- Klicken Sie auf Save
Globale CSS bearbeiten
- Klicken Sie im Menü „WalkMe Editor-Einstellungen“ auf Globale CSS bearbeiten
- Geben Sie die benutzerdefinierte CSS in den CSS-Editor ein
- Klicken Sie auf Save
- Klicken Sie auf „Publish Settings“
Tastaturkurzbefehle zum Suchen und Ersetzen
Sie können die folgenden Tastaturkurzbefehle (Windows/Mac) zum Suchen und Ersetzen in der CSS Console verwenden:
- 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:
WalkMe-ID finden
- Bewegen Sie den Mauszeiger über das Element im Editor
- Klicken Sie auf das Optionsmenü
- Klicken Sie auf ID kopieren
Verwenden von „!Important“
Standardmäßig überschreibt das WalkMe-Themendesign alle anderen Designänderungen.
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;
}
Die häufigsten CSS-Anpassungen
Smart Walk-Thrus
Surveys
WalkMe-Menü
ActionBot
Klassische ShoutOuts
WalkMe allgemein
Ändern Sie die WalkMe-Schriftart überall
Launchers
Schriftart ändern
font-family: /*your font here*/ !important;
}
SmartTips
Schriftart ändern
font-family: /*your font here*/ !important;
}
Tooltips ausblenden
Technische Informationen
- Lokales CSS überschreibt immer das globale CSS
- Das Hinzufügen von CSS zu Ihrem WalkMe-Inhalt kann sich auch auf CSS auf der Website auswirken, auf der der Inhalt angezeigt wird
- Wenn die globale CSS nicht mit der richtigen Einrückung und den richtigen Leerzeichen versehen ist, wird sie nicht veröffentlicht und kann im Play Mode (Wiedergabemodus) nicht angezeigt werden, bleibt aber im Preview Mode (Vorschaumodus) sichtbar
- Am besten formatieren Sie den Code in einer integrierten Entwicklungsumgebung (IDE), z. B. Visual Studio Code oder Sublime, und testen ihn zunächst im Flow Tracker
- Damit die CSS-Änderungen wirksam werden, müssen Sie ein Settings publish (Einstellungen veröffentlichen) durchführen
- Wenn Sie den Text mit CSS ändern, denken Sie daran, dass dadurch eventuelle Übersetzungen überschrieben werden
- Die folgenden Begriffe werden nicht unterstützt und können Fehler verursachen:
- @import
- Ausdruck
- Javascript
- -moz-bindung
- -o-link
- Verhalten
- Nur klassische ShoutOuts unterstützen CSS
- CSS kann sich nicht auf Shadow Dom-Elemente auswirken