05 Eigenes Kurslayout verwenden
Mithilfe von CSS können Sie das Aussehen Ihres Kurses individuell anpassen, z. B. an das Corporate Design Ihrer Institution. Unter anderem ist es möglich, Schrift- und Hintergrundfarben anzupassen oder bestimmte Bedienelemente neu zu positionieren.
Kurslayout aktivieren
Schritt 1: CSS-Datei in den Kursordner laden
Erstellen Sie zunächst Ihre eigene CSS-Datei und laden Sie diese in den Kursordner Ihres Kurses hoch. Diesen finden Sie im Kurseditor. |
|
Schritt 2: CSS-Datei einbinden
Um das Kurslayout aus dieser CSS-Datei zu aktivieren, gehen Sie nun wie folgt vor:
Öffnen Sie in der Kursansicht das Menü |  |
| Wählen Sie den ersten Eintrag Einstellungen aus. Es öffnet sich der Dialog Kurseinstellungen. | |
| Klicken Sie in diesem Dialog im Abschnitt Kurs-Layout in der Box CSS aus Ablageordner auf das kleine Dreieck. Es öffnet sich eine Liste der verfügbaren CSS-Dateien. Wählen Sie nun die gewünschte CSS-Datei aus. |
|
| Automatisch erscheint der gewählte Dateiname in der nun farbig hervorgehobenen Auswahlbox. |  |
| Speichern Sie Ihre Änderungen und schließen Sie den Dialog. |
Weitere Einstellungen oben rechts im Kurs.
Beispiele für Layoutanpassungen
- Hauptnavigation ausblenden
- Hintergrundbild für den Kurs einbinden
- Einfärben von Kursbausteinen im Menü
- Status-Farben für den Kursfortschritt anpassen
- Button "Test starten" für Tests oder Selbsttests umbenennen
- Box "Lösungsversuche" neben dem Button "Test starten" für Selbsttests ausblenden
- Bewertungsinformationen für Selbsttests ausblenden
- Informationen auf der Startseite des Kurses ausblenden
Anpassungen an das Corporate Design
Logo im Header austauschen
Fügen Sie Ihr Logo (png, jpg, svg) in den gleichen Ordner ein, in dem auch Ihre CSS-Datei liegt. Passen Sie bei Bedarf die Breite (width) sowie die Größe des Bildes (background-size) an. Im Beispiel nutzen wir das Logo "logo-bps.svg".
width: 200px;
background-image: url(logo-bps.svg);
background-size: 150px;
}
Hintergrundfarbe der Navigationsleiste ändern (inkl. mobile Version)
Die Schriftfarbe und die Gestaltung weiterer Elemente ist auf eine dunkle Navigationsleiste ausgerichtet. Bei einer hellen Hintergrundfarbe müssen Sie ggf. weitere Elemente anpassen. Im Beispiel wird auch die Farbe des Headers in der mobilen Version geändert.
.nav-container,
.nav-container + .clearfix {
background-color: #008079;
}
Schrift-/Icon-Farbe von Links und Buttons anpassen
Wählen Sie für die Interaktionsmöglichkeiten wie hover und focus eine andere Farbe, um Nutzer*innen Feedback zu geben.
color: #008079;
}
a:hover, a:focus, a:active,
.btn:hover, .btn:focus, .btn:active {
color: #004A46;
}
Hauptnavigation ausblenden
Sie können bei Bedarf die Navigationsleiste ausblenden. Beachten Sie dabei bitte, dass die Navigation z. B. zu Lehren & Lernen oder anderen geöffneten Kursen dann nicht mehr möglich ist. Für die mobile Version sollten Sie das Ausblenden wie im Beispiel rückgängig machen.
display: none;
}
.mobile .nav-container {
display: block;
}
Hintergrundbild für den Kurs einbinden
Fügen Sie Ihr Hintergrundbild (png, jpg, svg) in den gleichen Ordner ein, in dem auch Ihre CSS-Datei liegt. Achten Sie dabei auf die Dateigröße, um ein schnelles Laden des Kurses zu ermöglichen. Hinweise zur Dateigröße.
Bei W3Schools finden Sie weitere Informationen zum Einbinden von Hintergrundbildern in CSS.
background: url(background.jpg) no-repeat 0 0;
}
Einfärben von Kursbausteinen im Menü
Wenn Sie alle Kursbausteine eines Typs, z. B. alle Blogs im Menü auf der linken Seite, hervorheben möchten, nutzen Sie folgenden Code:
background: darkblue;
color: #fff;
}
Eine Liste der der restlichen Kursbausteine bietet die Seite CSS-Klassen der Kursbausteine.
Wenn Sie nur einen bestimmten Kursbaustein im Menü, z. B. den Abschlusstest, hervorheben möchten, können Sie die ID des Kursbausteins verwenden. Im Beispiel wird die ID 84915228820561 genutzt:
background: darkblue;
color: #fff;
}
Status-Farben für den Kursfortschritt anpassen
Der Fortschritt für einzelne Kursbausteine wird im Menü des Kurses und im oberen Bereich des Inhalts angezeigt. Über border-left-color können Sie die Farben anpassen. Weitere Informationen zur Fortschrittsanzeige im Kurs.
Farben im Kursmenü anpassen
.jstree-anchor.progress-50 {border-left-color: #FBDFBD;}
.jstree-anchor.progress-100 {border-left-color: #5caa7f;}
Farben im Kopfbereich des Kursbausteins anpassen
.resource-header.progress-50 {border-left-color: #FBDFBD;}
.resource-header.progress-100 {border-left-color: #5caa7f;}
Button "Test starten" für Tests oder Selbsttests umbenennen
Wenn Sie statt Test starten z. B. Mission starten als Beschriftung für den Button zum Starten von Selbsttests (Klasse iqself) nutzen möchten, können Sie folgenden Code verwenden:
.iqself .run-container .btn-big:after {content: "Mission starten";}
Für einen Kursbaustein Test nutzen Sie die Klasse iqtest:
.iqtest .run-container .btn-big:after {content: "Mission starten";}
Box "Lösungsversuche" neben dem Button "Test starten" für Selbsttests ausblenden
Sie können die Box mit den Informationen zu den Lösungsversuchen z. B. für Selbsttests (Klasse iqself) mit folgendem Code ausblenden:
Bewertungsinformationen für Selbsttests ausblenden
Nutzen Sie folgenden Code, um alle Bewertungsinformationen bei Selbsttests (Klasse iqself) auszublenden:
Informationen auf der Startseite des Kurses ausblenden
Um z. B. die Angaben zur Institution und zum Semester sowie die Metadaten auszublenden, können Sie den folgenden Code verwenden:
Institution und Semester ausblenden
Metadaten ausblenden
Weitere Möglichkeiten, die angezeigten Informationen auf der Startseite anzupassen:
Beschreibung von der Detailseite ausblenden
Kursverantwortliche ausblenden
Gesamten Bereich auf der Startseite ausblenden