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
Bewährte Verfahren
Bei der Eingabe von benutzerdefinierter CSS zeigt WalkMe Optionen für die automatische Vervollständigung von Selektoren, Eigenschaften und Werten an
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
Geben Sie die benutzerdefinierte CSS in die CSS-Konsole ein
Klicken Sie auf Save
Falls ein Fehler auftritt, wird eine Validierungsmeldung angezeigt, nachdem Sie auf „Save“ geklickt haben.
Fehlermeldungen sind auf Anfrage auch für HTML verfügbar. Bitte wenden Sie sich an Ihren Customer Success Manager oder WalkMe-Kontakt, um diese Option zu aktivieren.
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
Zu 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.
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
