CSS

Last Updated Januar 2, 2023

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

Schauen Sie sich die CSS-Lektion im Kurs Advanced Solution Building an
Sie haben noch kein DAI-Konto? Melden Sie sich hier an.

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

Nehmen Sie an der Diskussion in der WalkMe Community teil!

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 im Menü Interacation einer Sprechblase angewendet werden.

Globales CSS kann im Menü Customize hinzugefügt werden:

Die Verwendung des lokalen CSS-Editors (Rich Text Editor) macht es einfach, ein einzelnes ShoutOut anzupassen. Wenn Sie einen einzelnen ShoutOut auf globaler Ebene anpassen, müssen Sie die ID* des ShoutOuts vor der Klasse angeben, die den Sprechblasenabschnitt identifiziert (d. h. auf lokaler Ebene: .walkme-custom-balloon-title bzw. auf globaler Ebene: #walkme-balloon-XXXXXXX.walkme-custom-balloon-title).

*Profi-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: Anzeige Hintergrund
2	.walkme-custom-balloon-separator	Dieses Element ist das Trennzeichen im unteren Drittel der Sprechblase: Anzeige
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

Entfernen Sie die Schaltfläche „X“ aus einer Sprechblase.

.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 Farben der Seitenränder einer Sprechblase.

.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;
}

Verändern Sie die Breite einer ShoutOut-Sprechblase.

.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}

Entfernen Sie einen Pfeil aus der Sprechblase.

Walk-Thrus:
.walkme-custom-balloon-arrow.walkme-custom-step-xxxxxxx{
display: none !important;
}

Smart Walk-Thrus:
.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}

Verändern Sie den Text der Schaltfläche „Next“ (Weiter)

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;
}

Verändern Sie den Text für die Schaltfläche „Back“ (Zurück).

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

Verändern Sie den Text für die Schaltfläche „Done“ (Fertig).

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 globale WalkMe-Schriftart.

#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 !wichtig; /*
}

Ändern Sie die Schriftart eines Launchers.

.walkme-icon-image-div.walkme-launcher-image-div {
font-family: /*Ihre Schriftart hier*/ !important;
}

Ändern Sie die Schriftart einer Sprechblase.

.walkme-custom-balloon-title,
.walkme-custom-balloon-content,
.walkme-custom-balloon-button-text {
font-family: /*Ihre Schriftart hier*/ !important;
}

Ändern Sie die Schriftart eines Widgets.

#walkme-menu.walkme-penguin,
#walkme-main .walkme-title {
font-family: /*Ihre Schriftart hier*/ !important;
}.walkme-menu.walkme-penguin .walkme-icon {
font-family: /*Ihre Schriftart hier*/ !important;
}

Ändern Sie die Schriftart eines SmartTips.

.walkme-tooltip-content-wrapper .walkme-tooltip-content {
font-family: /*Ihre Schriftart hier*/ !important;
}

Blenden Sie Tooltips in SmartTips aus.

.walkme-tooltip-smarttip-XXXXX{
Display: none !important;
}div.walkme-custom-tooltip-arrow-top.walkme-custom-tooltip-item-YYYYY{
Display: none !important;
}

Wenden Sie Z-Indexänderungen auf alle Sprechblasen eines Walk-Thrus 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;}

Öffnen/Erweitern Sie Kategorien
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)

Sie können die folgenden Tastenkombinationen (Windows/Macintosh) zum Suchen und Ersetzen in der benutzerdefinierten CSS-Konsole 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:

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:

Menu Organizer
Alle Änderungen, die Sie im Menü Customize anwenden (einschließlich Änderungen am Widget und benutzerdefinierten CSS)
Änderungen, die auf das Menü Settings angewendet wurden.
Globale Segmente

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.

Video mit Tipps und Tricks zu CSS

War dies hilfreich?

Ja Nein

Nein

Vielen Dank für Ihr Feedback!

CSS

Kurzübersicht

Anwendungsfälle