CSS für klassische ShoutOuts
Kurzübersicht
Cascading Style Sheets (CSS) ermöglicht es Ihnen, erweiterte Anpassungen für klassische ShoutOuts vorzunehmen, einschließlich der Elemente Schriftart, Hintergrund und Umrandung.
CSS kann zum Anpassen von Folgendem in Bezug auf ShoutOuts verwendet werden:
- Schaltflächen „Aktion“ und „Schließen“
- Text-Header und Menüband
- Text
- Schaltfläche „X“
Lesen Sie ShoutOuts: Leitfaden für die ersten Schritte, um mehr über die Verwendung des neuen Visual Editors für ShoutOuts ohne die Notwendigkeit von CSS zu erfahren.
Funktionsweise
Cascading Style Sheets (CSS) ist eine Formatvorlagensprache, die zur Beschreibung der Formatierung eines in einer Auszeichnungssprache geschriebenen Dokuments verwendet wird. Wenn Sie in CSS schreiben, müssen Sie sich auf die verschiedenen Komponenten (technisch als Elemente bekannt) des klassischen ShoutOuts beziehen.
Bei der Eingabe in das Fenster „Custom CSS“ zeigt WalkMe Optionen zum automatischen Vervollständigen von Selektoren, Eigenschaften und Werten an.
Konfigurieren von Sprechblasenkomponenten
Jeder ShoutOut enthält eine Reihe von Komponenten (Elemente), die mit CSS angepasst werden können.
Sie können z. B. den Titelbereich eines ShoutOuts mit dieser Klasse gezielt ansteuern:
- .wm-title
Sehen Sie sich die gesamte Liste der Klassen an.
Globale im Vergleich zu lokalen CSS
CSS kann global oder lokal angewendet werden. Die Verwendung der lokalen CSS-Konsole erleichtert das Anpassen eines individuellen ShoutOuts.
Wenn Sie ein einzelnes ShoutOut auf globaler Ebene anpassen, müssen Sie die ID des ShoutOuts vor der Klasse eingeben, die den Sprechblasenabschnitt identifiziert.
Beispiel für lokale CSS:
- .wm-title
Beispiel für globale CSS:
- #wm-shoutout-XXXXX .wm-title
Lokale CSS bearbeiten
- Öffnen Sie das Menü ShoutOut-Optionen
- Gehen Sie auf die Registerkarte Interaktion
- 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“
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:
#wm-shoutout-XXXXX .wm-title {
color: #000 !important;
}
Konfigurierbare Komponente
| Verschiedene | Editierbare Funktionen | |
| 1 | .wm-outer-div | Dieses Element ist das ShoutOut-Menüband. Sie können Folgendes bearbeiten:
|
| 2 | .wm-ribbon | Dieses Element ist das ShoutOut-Menüband. Sie können Folgendes bearbeiten:
|
| 3 | .wm-title | Dieses Element ist der ShoutOut-Header. Sie können Folgendes bearbeiten:
|
| 4 | .wm-template-text | Dieses Element ist der ShoutOut-Text. Sie können Folgendes bearbeiten:
|
| 5 | .wm-blue-btn | Dieses Element ist die Schaltfläche „Action“ (Aktion). Sie können Folgendes bearbeiten:
|
| 6 | .wm-close-link | Dieses Element bildet die Schaltfläche „Schließen“ Sie können Folgendes bearbeiten:
|
| 7 | .walkme-x-button | Dieses Element ist die Schaltfläche „X“. Sie können Folgendes bearbeiten:
|
Allgemeine CSS-Anpassungen
Ändern Sie die Breite einer ShoutOut-Sprechblase
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
ShoutOut-Menüband zentrieren
#wm-shoutout-XXXXX .wm-main-ribbon.wm-template-main-bg,
.wm-ribbon-edge.left.wm-template-main-bg, .wm-ribbon-edge.right.wm-template-main-bg {
Hintergrundfarbe: #XXXXXX !important;
}
Linkes Ende des ShoutOut-Menübands
#wm-shoutout-XXXXX .wm-ribbon-triangle.left.top.wm-main-border-right-color, .wm-ribbon-ripple.left.wm-main-border-right-color {
border-color: transparent #XXXXXX transparent transparent !important;
}
#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}
Rechtes Ende des ShoutOut-Menübands
#wm-shoutout-XXXXX .wm-ribbon-triangle.right.top.wm-main-border-top-color, .wm-ribbon-ripple.right.wm-main-border-top-color.wm-main-border-left-color {
border-color: #XXXXXX transparent transparent !important;
}
#wm-shoutout-XXXXX .wm-ribbon-triangle.right.bottom.wm-main-border-left-color {
border-color: transparent transparent transparent #XXXXXX !important;
}
Trapezvorlage
#wm-shoutout-XXXXX .wm-trapezoid {
border-top: 40px solid #XXXXXX !important;
}
#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}
Quadratische Vorlage
#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}