Please log in to continue
WalkMe stores your data in the region chosen during account setup.
We have data centers in the US and EU that follow local privacy and compliance laws. If you're not sure which region to select, check with your admin.
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:
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.
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.
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:
Sehen Sie sich die gesamte Liste der Klassen an.
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:
Beispiel für globale CSS:
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;
}
| 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:
|
.wm-shoutout-XXXX.wm-outer-div {
width: XXXpx !important;
}
#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;
}
#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;
}
#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;
}
#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;
}
#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}