- SafetyCulture nutzen
- Schulungen (Bearbeiten)
- Nutzerdefinierte CSS für Kursmotive
Nutzerdefinierte CSS für Kursmotive
In diesem Artikel erfahren Sie mehr über nutzerdefinierte CSS und wie Sie sie mithilfe der Web-App auf Ihre Motive für Schulungen anwenden können.
Warum sollte ich nutzerdefinierte CSS für Kursmotive verwenden?
Die Schulungs-Funktion der SafetyCulture-Plattform bietet eine Vielzahl von Anpassungsmöglichkeiten für Ihre Schulungen. Sie können Kursmotive verwalten, um Farbpaletten auszuwählen, Logos hinzuzufügen und mehr, um visuell eindrucksvolle und ansprechende Inhalte zu erstellen. Wenn Sie Programmierkenntnisse und -erfahrung haben, können Sie Ihre Kursmotive über die verfügbaren Optionen hinaus mit nutzerdefinierten CSS anpassen, um Ihren Teammitglieder so richtig zu beeindrucken.
Die Anwendung von benutzerdefiniertem CSS in der Schulungsfunktion liegt außerhalb unseres Support-Bereichs, sodass wir keine Anleitung oder Support bei der Einrichtung und Fehlerbehebung bieten können.
Da benutzerdefiniertes CSS eine codebasierte Lösung ist, können wir auch nicht für seine Funktionalität oder vollständige Kompatibilität mit der Schulungsfunktion garantieren. Dies umfasst die Interaktion mit unserem responsiven Design und seine Leistung in allen Kursen.
Beispiel CSS-Code
Um Ihnen den Einstieg in benutzerdefinierte CSS für Kursthemen zu erleichtern, haben wir Codebeispiele für Sie, die Sie als Referenz für die Formatierung der folgenden Elemente in einem Kurs verwenden können:
Schriftarten und Text
Schaltflächen
Kopfzeilen und Rahmen
Spezielle Inhalte und Interaktionen für verschiedene Arten von Folien
Wir ermutigen Sie, das Motiv Ihrer Kurse mit unserem CSS-Beispielcode zu testen und an das Markendesign Ihrer Organisation anzupassen.
Schriftarten und Text
/* FONTS - You can change this by finding a font to import on Google */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=Poppins&display=swap');
h1 {
font-family: 'Poppins', sans-serif;
color: var(--text-color);
font-size: 28px;
font-weight: 600;
}
h2 {
font-family: 'Poppins', sans-serif;
color: var(--text-color);
font-size: 22px;
}
h3, h4, h5 {
font-family: 'Noto Sans', sans-serif;
color: var(--text-color);
font-size: 16px;
}
body {
font-family: 'Noto Sans', sans-serif;
color: var(--text-color);
font-size: 16px;
}
Stammvariablen
:root {
--main-color: #6559FF;
--accent-color: #FFD700;
--text-color: #293745;
}
Schaltflächen
/* BUTTONS */
.btn.btn {
background-color: var(--main-color);
color: #ffffff;
border-radius: 8px;
font-size: 15px;
}
.btn.btn:hover {
background-color: #564BE7;
color: #ffffff;
border-radius: 8px;
transition: 0.3s;
}
.btn.btn:active {
Hintergrundfarbe: #564BE7;
Farbe: #ffffff;
Umrandungsradius: 8px;
}
Unterer Rand
/* BOTTOM BORDER */
.block-h-lg {
border-bottom: 5px solid black;
border-image: linear-gradient(90deg, rgba(101,89,255,1) 33%, rgba(20,202,255,1) 33%, rgba(20,202,255,1) 65%, rgba(255,215,0,1) 65%, rgba(255,215,0,1) 100%);
border-image-slice: 30;
}
Überschrift der Lektion
/* LESSON HEADER */
#indicator {
color: #6559FF;
background: #ffffff;
}
#lesson-header-nav {
background-color: var(--main-color);
color: #ffffff;
font-size: 13px;
}
#lesson-header-nav-menu-btn {
border-color: #ffffff;
color: #ffffff;
}
#lesson-header-title-content {
border-bottom: 0px solid transparent;
font-family: 'Noto Sans';
font-size: 15px;
}
#slides {
font-family: 'Noto Sans', sans-serif;
color: var(--text-color);
font-size: 16px;
border-bottom: 0px solid;
}
.slide-footer .slide-footer-prompt-content {
font-style: shadow;
}
Antwort-Folie
/* ANSWER SLIDE */
#slide-answer {
color: var(--main-color);
}
Erweiterbare Liste
/* EXPANDABLE LIST */
.slide-expandable-list .item.active .item-button {
background-color: #564BE7;
color: #ffffff;
}
.slide-expandable-list .btn.btn-solid {
border-radius: 3px;
}
Richtig oder falsch
/* TRUE OR FALSE */
.slide-game-true-or-false .game-statement {
background-color: var(--main-color);
color: #ffffff;
font-size: 14px;
}
Multiple-Choice
/* MULTIPLE CHOICE */
.selectable.active .btn {
background-color: var(--text-color);
color: #ffffff;
}
.slide-multiple-choice-game.state-complete .selectable.correct .btn {
background-color: var(--text-color);
color: #ffffff;
}
.slide-multiple-choice-game.state-complete .selectable.incorrect .btn {
background-color: #3030;
color: var(--text-color);
}
Multiple-Choice-Chat
/* MULTIPLE CHOICE CHAT */
/* Question Bubble */
.quote.quote-dk {
background-color: #dbdff7;
color: var(--main-color);
}
.quote.quote-dk:after {
border-color: #dbdff7 transparent transparent;
}
/* Choice Bubbles */
.quote.quote-lt {
background-color: var(--main-color);
color: #ffffff;
}
.quote.quote-lt:after {
border-color: var(--main-color) transparent transparent;
}
/* Active Bubble */
.quote.active {
background-color: #14caff;
color: #ffffff;
}
.quote.active:after {
border-color: #14caff transparent transparent;
}
/* Correct Answer Bubble */
.slide-chat.state-complete .chat-msg.correct {
background-color: #14caff;
color: #ffffff;
}
.slide-chat.state-complete .chat-msg.correct:after {
border-color: #14caff transparent transparent;
}
Aufdecken
/* REVEAL */
.slide-reveal .btn-reveal-title.flippable {
background: #14caff;
color: var(--text-color);
}
.slide-reveal .btn-reveal.active .btn-reveal-desc.flippable {
background: #e8faff;
color: #14caff;
}
.slide-reveal .btn-reveal-desc, .slide-reveal .btn-reveal-title {
pointer-events: none;
}
Sprechblase
/* SPEECH BUBBLE */
/* dark */
.slide-speech-bubble .quote.pull-left.quote-dk:after {
border-color: transparent transparent transparent;
}
/* light */
.slide-speech-bubble .quote.pull-left.quote-lt {
background: #f9f9f9;
border-left: 8px solid #14caff;
margin: 1.5em 10px;
padding: -5em 1px;
quotes: "\201C""\201D""\2018""\2019";
}
.slide-speech-bubble .quote.pull-left.quote-lt:before {
color: #ffd700;
content: open-quote;
font-size: 130px;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
.slide-speech-bubble .quote.pull-left.quote-lt:after {
border-color: transparent transparent transparent;
color: #ffd700;
content: close-quote;
font-size: 130px;
line-height: 0.3em;
margin-left: 1.4em;
vertical-align: -0.4em;
}
Bild-Schieberegler
/* IMAGE SLIDER */
.slide-image-slider .style-default .caption-content {
background-color: #dbdff7;
color: var(--main-color);
}
Schieberegler-Schaltflächen
/* SLIDER BUTTONS */
.slide-image-slider .btn-down {
border-radius: 50%;
color: #ffd700;
}
.slide-image-slider .btn-up {
border-radius: 50%;
color: white;
}
.slide-image-slider .btn-down:hover {
border-radius: 50%;
color: white;
}
.slide-image-slider .btn-down:active {
border-radius: 50%;
color: #14caff;
}
.slide-image-slider .btn-up:hover {
border-radius: 50%;
color: #14caff;
}
.slide-image-slider .btn-up:active {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-down {
border-radius: 50%;
color: #ffd700;
}
.slide-text-sequence .btn-up {
border-radius: 50%;
color: #ffd700;
}
.slide-text-sequence .btn-down:hover {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-down:active {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-up:hover {
border-radius: 50%;
color: #14caff;
}
.slide-text-sequence .btn-up:active {
border-radius: 50%;
color: #14caff;
}
Scrolling
/* SCROLLING MIX */
.pswp__top-bar {
color: #293745;
}
.pswp--notouch .pswp__hint:before {
content: "Press ESC to dismiss";
color: black;
}
Eingabeaufforderung
.state-prompt .slide-footer .slide-footer-prompt, .state-intro .slide-footer .slide-footer-prompt {
font-family: 'Noto Sans';
font-size: 14px;
border-bottom: 0px solid transparent;
}
Öffentliche CSS-Ressourcen
Wenn Sie weitere Anleitungen benötigen, finden Sie hier einige hilfreiche Online-Ressourcen, die Ihnen helfen, mit dem CSS-Code loszulegen:
War diese Seite hilfreich?
Vielen Dank für Ihre Anmerkungen.