CSS für Smart Walk-Thrus

Last Updated Juli 2, 2024

Download as PDF

Kurzübersicht

Mit Cascading Style Sheets (CSS) können Sie Smart Walk-Thru-Elemente anpassen, einschließlich Layout, Farben und Schriftarten.

Beim Schreiben von CSS sind Verweise auf verschiedene Komponenten oder Elemente des Smart Walk-Thru unerlässlich. Dieser Artikel bietet einen Überblick über die CSS-Optionen, die für die Personalisierung dieser erweiterten Elemente zur Verfügung stehen.

Um Smart Walk-Thrus mit den Standardoptionen anzupassen, lesen Sie den Leitfaden für die ersten Schritte.

CSS

Funktionsweise

Smart Walk-Thru Komponenten

Jeder Smart Walk-Thru enthält eine Reihe von Komponenten (Elemente), die mit CSS angepasst werden können. Smart Walk-Thrus können sowohl lokal als auch global angepasst werden.

Wenn Sie einen einzelnen Smart Walk-Thru auf globaler Ebene anpassen, müssen Sie die Smart Walk-Thru-ID vor der Klasse eingeben, die die Sprechblase identifiziert.

Beispiel auf lokaler Ebene:

• .walkme-custom-balloon-title

Beispiel auf globaler Ebene:

• #walkme-balloon-XXXXXXX.walkme-custom-balloon-title

Die Smart Walk-Thru-ID finden Sie im WalkMe-Editor:

1. Bewegen Sie den Mauszeiger über das Smart Walk-thru im Editor.
2. Klicken Sie auf das Optionsmenü
3. ID kopieren auswählen

Unten finden Sie eine vollständige Liste der Klassen.

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;

}

Lokale CSS bearbeiten

1. Öffnen Sie das Menü Smart Walk-Thru Step Options
2. Gehen Sie auf die Registerkarte Interaction
3. Klicken Sie auf CSS bearbeiten
4. Geben Sie die benutzerdefinierte CSS in die CSS-Konsole ein
5. Klicken Sie auf Save

Globale CSS bearbeiten

1. Klicken Sie im Menü „WalkMe Editor-Einstellungen“ auf Globale CSS bearbeiten
2. Geben Sie die benutzerdefinierte CSS in den CSS-Editor ein
3. Ersetzen Sie hervorgehobene Abschnitte im CSS durch Ihre Anpassungen
4. Klicken Sie auf Save
5. Klicken Sie auf „Publish Settings“

Konfigurierbare Smart Walk-Thru-Komponenten

Allgemeine CSS-Anpassungen

Entfernen Sie den Button „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 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;
}