CSS für Smart Walk-Thrus
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.
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:
- Bewegen Sie den Mauszeiger über das Smart Walk-thru im Editor.
- Klicken Sie auf das Optionsmenü
- 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
- Öffnen Sie das Menü Smart Walk-Thru Step Options
- 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
- Ersetzen Sie hervorgehobene Abschnitte im CSS durch Ihre Anpassungen
- Klicken Sie auf Save
- Klicken Sie auf „Publish Settings“
Konfigurierbare Smart Walk-Thru-Komponenten
| Verschiedene | Editierbare Funktionen | |
|---|---|---|
| 1 | .walkme-custom-side-border | Sprechblasenrand auf der linken Seite:
|
| 2 | .walkme-custom-balloon-separator | Sprechblasentrennzeichen (unteres Drittel):
|
| 3 | .walkme-custom-balloon-title | Sprechblasen-Header:
|
| 4 | .walkme-custom-balloon-content | Sprechblasentext:
|
| 5 | .walkme-custom-balloon-subtext | Schrittnummer:
|
| 6 | .walkme-custom-balloon-back-button | Schaltfläche zurück:
|
| 7 | .walkme-custom-balloon-next-button | Schaltfläche weiter:
|
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;
}
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 die Schriftart einer Sprechblase
.walkme-custom-balloon-content,
.walkme-custom-balloon-button-text {
font-family: /*your font here*/ !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;
}
Lassen Sie die Standard-Körpertextgröße mit der Headergröße übereinstimmen
.walkme-custom-balloon-title, .walkme-custom-balloon-content {
font-size: 12px !important;
}
Reduzieren Sie den Weißraum in Sprechblasen, die nicht über die Schaltfläche Weiter/Zurück verfügen
.walkme-custom-balloon-bottom-div:has(.walkme-custom-balloon-no-buttons-div) {
display: none !important;
}
.walkme-custom-balloon-inner-div:has(.walkme-custom-balloon-no-buttons-div) {
padding-bottom: 20px !important;
}