Zum Inhalt springen

Wiki-Quellcode von Eigenes Kurslayout verwenden

Zuletzt geändert von Carina Enke am 23.02.2026
Verstecke letzte Bearbeiter
Carina Enke 1102.1 1 {{section}}
2 {{column width="60%"}}
Carina Enke 1086.1 3 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.
4
5 (% class="box warningmessage" %)
6 (((
7 **Achtung**
8
9 Sie sollten das Kurslayout nur anpassen, wenn Sie gute Kenntnisse in HTML und CSS haben. Beachten Sie bitte, dass viele Klassen mehrfach verwendet werden und möglicherweise nicht alle Änderungen auf den ersten Blick sichtbar sind. Testen Sie Ihre Anpassungen mit verschiedenen Bildschirmgrößen und mobilen Endgeräten.
10
Carina Enke 1098.1 11 Achten Sie zur Unterstützung der Barrierefreiheit außerdem auf einen ausreichenden [[Kontrast zwischen Schriftfarbe und Hintergrund>>doc:LMS.Benutzerhandbuch OPAL.Barrierefreiheit.WebHome]].
Carina Enke 1086.1 12 )))
Carina Enke 1102.1 13 {{/column}}
Carina Enke 1086.1 14
Carina Enke 1102.1 15 {{column width="30%"}}
16 {{panel title="Inhalt"}}
17 {{toc depth="3" start="2"/}}
18 {{/panel}}
19 {{/column}}
20 {{/section}}
Carina Enke 1086.1 21
Carina Enke 1102.1 22
Carina Enke 1086.1 23 == Kurslayout aktivieren ==
24
25 (% class="box infomessage" %)
26 (((
27 Mit dem Release OPAL 11.3 ist die Funktion zum Ändern des Kurslayouts in der neuen Benutzeroberfläche verfügbar. Wie Sie das Kurslayout in der alten Benutzeroberfläche aktivieren, erläutert der Abschnitt Kurslayout aktivieren (alte Benutzeroberfläche).
28 )))
29
30 **Schritt 1: CSS-Datei in den Kursordner laden**
31
Carina Enke 1102.1 32 |(% style="width:1130px" %)(((
Carina Enke 1086.1 33 Erstellen Sie zunächst Ihre eigene CSS-Datei und laden Sie diese in den **Kursordner** Ihres Kurses hoch. Diesen finden Sie im Kurseditor.
Carina Enke 1102.1 34 )))|(% style="width:600px" %)(((
35 [[image:https://www.bps-system.de/help/download/attachments/55574597/Kurseditor%20-%20Aufruf%20Kursablageordner_de.png?version=1&modificationDate=1632463074362&api=v2||alt="Ablageordner im Kurseditor" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1086.1 36 )))
37
38 **Schritt 2: CSS-Datei einbinden**
39
40 Um das Kurslayout aus dieser CSS-Datei zu aktivieren, gehen Sie nun wie folgt vor:
41
Carina Enke 1089.2 42 |(% style="width:962px" %)(((
Carina Enke 1098.1 43 Öffnen Sie in der Kursansicht das Menü [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_zweiRädchen.png||data-xwiki-image-style="img-icon"]] **Weitere Einstellungen** oben rechts im Kurs.
Carina Enke 1102.1 44 )))|(% colspan="1" rowspan="2" style="width:507px" %)[[image:Kursrun - Kurseinstellungen aufrufen_de.png||alt="Einstellungen zum Kurs öffnen" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="282" width="308"]]
Carina Enke 1089.2 45 |(% style="width:962px" %)Wählen Sie den ersten Eintrag **Einstellungen **aus. Es öffnet sich der Dialog **Kurseinstellungen**.
Carina Enke 1089.1 46 |(% style="width:962px" %)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.|(% style="width:507px" %)(((
Carina Enke 1098.1 47 [[image:Kursrun - CSS auswählen_de.png||alt="Kursrun -CSS auswählen_de" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1086.1 48 )))
Carina Enke 1098.1 49 |(% style="width:962px" %)Automatisch erscheint der gewählte Dateiname in der nun farbig hervorgehobenen Auswahlbox.|(% colspan="1" rowspan="2" style="width:507px" %)[[image:Kursrun - gewählte CSS_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1089.1 50 |(% style="width:962px" %)Speichern Sie Ihre Änderungen und schließen Sie den Dialog.
Carina Enke 1086.1 51
52
53
Carina Enke 1102.1 54 == Beispiele für Layoutanpassungen ==
Carina Enke 1086.1 55
Carina Enke 1097.1 56 === (% style="color:inherit; font-family:inherit; font-size:max(18px, min(22px, 10.8889px + 0.925926vw))" %)Anpassungen an das Corporate Design(%%) ===
Carina Enke 1089.1 57
Carina Enke 1086.1 58 ==== Logo im Header austauschen ====
59
60 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".
61
Carina Enke 1087.2 62
Carina Enke 1098.1 63 {{code language="none"}}
Carina Enke 1086.1 64 .logo {
Carina Enke 1098.1 65     width: 200px;
66     background-image: url(logo-bps.svg);
67     background-size: 150px;
Carina Enke 1086.1 68 }
Carina Enke 1098.1 69 {{/code}}
Carina Enke 1086.1 70
Carina Enke 1087.2 71
Carina Enke 1086.1 72 ==== Hintergrundfarbe der Navigationsleiste ändern (inkl. mobile Version) ====
73
74 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.
75
Carina Enke 1098.1 76 {{code language="none"}}
Carina Enke 1086.1 77 .page .mobile-page-header,
78 .nav-container,
79 .nav-container + .clearfix {
80 background-color: #008079;
81 }
Carina Enke 1098.1 82 {{/code}}
Carina Enke 1086.1 83
Carina Enke 1087.2 84
Carina Enke 1086.1 85 ==== Schrift-/Icon-Farbe von Links und Buttons anpassen ====
86
Carina Enke 1099.1 87 Wählen Sie für die Interaktionsmöglichkeiten wie hover und focus eine andere Farbe, um Nutzenden Feedback zu geben.
Carina Enke 1086.1 88
Carina Enke 1087.3 89
Carina Enke 1098.1 90 {{code language="none"}}
Carina Enke 1097.1 91 a, .btn {color: #008079;}
Carina Enke 1086.1 92 a:hover, a:focus, a:active,
Carina Enke 1097.1 93 .btn:hover, .btn:focus, .btn:active {color: #004A46;}
Carina Enke 1098.1 94 {{/code}}
Carina Enke 1086.1 95
Carina Enke 1087.3 96
Carina Enke 1086.1 97
Carina Enke 1098.1 98 [[image:Kursdesign - Logo und Farben_de.png||alt="Corporate Design Anpassungen" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="300" width="778"]]
Carina Enke 1087.1 99
100
Carina Enke 1089.1 101
Carina Enke 1087.1 102 === Hauptnavigation ausblenden ===
103
104 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.
105
Carina Enke 1087.2 106
Carina Enke 1098.1 107 {{code language="none"}}
Carina Enke 1097.1 108 .nav-container {display: none;}
109 .mobile .nav-container {display: block;}
Carina Enke 1098.1 110 {{/code}}
Carina Enke 1087.1 111
112
Carina Enke 1098.1 113 [[image:Kursdesign - Navigation ausblenden_de.png||alt="Hauptnavigation ausblenden" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1087.1 114
Carina Enke 1089.1 115
Carina Enke 1087.1 116 === Hintergrundbild für den Kurs einbinden ===
117
118 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.>>url:https://www.bps-system.de/help/display/LMS/Usability+Barrierefreiheit#UsabilityBarrierefreiheit-Dateigr%C3%B6%C3%9Fe]]
119
120 Bei [[W3Schools>>url:https://www.w3schools.com/cssref/css3_pr_background.asp]] finden Sie weitere Informationen zum Einbinden von Hintergrundbildern in CSS.
121
Carina Enke 1087.2 122
Carina Enke 1098.1 123 {{code language="none"}}
Carina Enke 1087.1 124 #wrap {
125 background: url(background.jpg) no-repeat 0 0;
126 }
Carina Enke 1098.1 127 {{/code}}
Carina Enke 1087.1 128
Carina Enke 1098.1 129 [[image:Kursdesign - Hintergrundbild_de.png||alt="Kurs mit Hintergrundbild" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1087.1 130
Carina Enke 1089.1 131
Carina Enke 1087.1 132 === Einfärben von Kursbausteinen im Menü ===
133
134 Wenn Sie alle Kursbausteine eines Typs, z. B. alle Blogs im Menü auf der linken Seite, hervorheben möchten, nutzen Sie folgenden Code:
135
Carina Enke 1087.2 136
Carina Enke 1098.1 137 {{code language="none"}}
Carina Enke 1087.1 138 .jstree-default>.jstree-container-ul a.node-blog {
139 background: darkblue;
140 color: #fff;
141 }
Carina Enke 1098.1 142 {{/code}}
Carina Enke 1087.1 143
Carina Enke 1098.1 144 Eine Liste der der restlichen Kursbausteine bietet die Seite [[CSS-Klassen der Kursbausteine>>doc:.CSS-Klassen der Kursbausteine.WebHome]].
Carina Enke 1087.1 145
146 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:
147
Carina Enke 1098.1 148 {{code language="none"}}
Carina Enke 1087.1 149 .jstree-default #id84915228820561_anchor {
150 background: darkblue;
151 color: #fff;
152 }
Carina Enke 1098.1 153 {{/code}}
Carina Enke 1087.1 154
155
Carina Enke 1098.1 156 [[image:Kursrun - Menü mit Beispiel CSS_de.png||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1087.1 157
Carina Enke 1089.1 158
Carina Enke 1087.1 159 === Status-Farben für den Kursfortschritt anpassen ===
160
Carina Enke 1098.1 161 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>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurs bearbeiten.Kursfortschritt.WebHome]].
Carina Enke 1087.1 162
Carina Enke 1089.2 163
Carina Enke 1087.1 164 **Farben im Kursmenü anpassen**
165
Carina Enke 1098.1 166 {{code language="none"}}
Carina Enke 1087.1 167 .jstree-anchor.progress-0 {border-left-color: #fa9370;}
168 .jstree-anchor.progress-50 {border-left-color: #FBDFBD;}
169 .jstree-anchor.progress-100 {border-left-color: #5caa7f;}
Carina Enke 1098.1 170 {{/code}}
Carina Enke 1087.1 171
172 **Farben im Kopfbereich des Kursbausteins anpassen**
173
Carina Enke 1098.1 174 {{code language="none"}}
Carina Enke 1087.1 175 .resource-header.progress-0 {border-left-color: #fa9370;}
176 .resource-header.progress-50 {border-left-color: #FBDFBD;}
177 .resource-header.progress-100 {border-left-color: #5caa7f;}
Carina Enke 1098.1 178 {{/code}}
Carina Enke 1087.1 179
180
Carina Enke 1101.1 181
Carina Enke 1087.1 182 === Button "Test starten" für Tests oder Selbsttests umbenennen ===
183
184 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:
185
Carina Enke 1098.1 186 {{code language="none"}}
Carina Enke 1087.1 187 .iqself .run-container .btn-big .fonticon+span {display: none;}
188 .iqself .run-container .btn-big:after {content: "Mission starten";}
Carina Enke 1098.1 189 {{/code}}
Carina Enke 1087.1 190
191 Für einen Kursbaustein Test nutzen Sie die Klasse iqtest:
192
Carina Enke 1098.1 193 {{code language="none"}}
Carina Enke 1087.1 194 .iqtest .run-container .btn-big .fonticon+span {display: none;}
195 .iqtest .run-container .btn-big:after {content: "Mission starten";}
Carina Enke 1098.1 196 {{/code}}
Carina Enke 1087.1 197
Carina Enke 1101.1 198 {{warning}}
199 CSS dient der Darstellung von Inhalten, also z. B. Layout, Farben, Abstände, Schriftarten oder das Ein- und Ausblenden von Elementen. Zwar lassen sich mit CSS über ::before oder ::after auch andere Inhalte einblenden oder bestehender Text visuell ausblenden, jedoch handelt sich nicht um eine saubere oder barrierefreie Lösung:
Carina Enke 1089.2 200
Carina Enke 1101.1 201 * der Originaltext bleibt technisch weiterhin im DOM bestehen
202 * Screenreader und Suchfunktionen greifen weiterhin auf den Originaltext zu
203 * Updates können solche Workarounds jederzeit beeinträchtigen
204
205 Eine echte Änderung von Systemmeldungen ist nur über die Anpassungen der Sprachressourcen bzw. durch eine Softwareanpassung möglich.
206
207 In manchen Fällen können ergänzende Erläuterungen im Beschreibungstext des Bausteins (z. B. mit Hinweisen wie „Im Kontext dieses Bewerbungsverfahrens bedeutet ‚Lösung‘ Ihre Bewerbungsunterlagen“) hilfreich sein.
208 {{/warning}}
209
210
211
Carina Enke 1087.1 212 === Box "Lösungsversuche" neben dem Button "Test starten" für Selbsttests ausblenden ===
213
214 Sie können die Box mit den Informationen zu den Lösungsversuchen z. B. für Selbsttests (Klasse iqself) mit folgendem Code ausblenden:
215
Carina Enke 1098.1 216 {{code language="none"}}
Carina Enke 1087.1 217 .iqself .run-container .box-light {display: none;}
Carina Enke 1098.1 218 {{/code}}
Carina Enke 1087.1 219
Carina Enke 1098.1 220 [[image:Kursrun - Test-Infobox per CSS ausblenden_de.png||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1087.1 221
Carina Enke 1089.1 222
Carina Enke 1087.1 223 === Bewertungsinformationen für Selbsttests ausblenden ===
224
225 Nutzen Sie folgenden Code, um alle Bewertungsinformationen bei Selbsttests (Klasse iqself) auszublenden:
226
Carina Enke 1098.1 227 {{code language="none"}}
Carina Enke 1087.1 228 .iqself .assess-container {display: none;}
Carina Enke 1098.1 229 {{/code}}
Carina Enke 1087.1 230
Carina Enke 1098.1 231 [[image:Kursrun - Bewertungsbox per CSS ausblenden_de.png||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1087.1 232
233
234 === Informationen auf der Startseite des Kurses ausblenden ===
235
236 Um z. B. die Angaben zur Institution und zum Semester sowie die Metadaten auszublenden, können Sie den folgenden Code verwenden:
237
238 **Institution und Semester ausblenden**
239
Carina Enke 1098.1 240 {{code language="none"}}
Carina Enke 1087.1 241 .root .resource-details .content-preview-main>small {display: none;}
Carina Enke 1098.1 242 {{/code}}
Carina Enke 1087.1 243
244 **Metadaten ausblenden**
245
Carina Enke 1098.1 246 {{code language="none"}}
Carina Enke 1087.1 247 .root .resource-details .content-preview-info {display: none;}
Carina Enke 1098.1 248 {{/code}}
Carina Enke 1087.1 249
Carina Enke 1098.1 250 [[image:Kursrun - Infobox-CSS_de.png||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1087.1 251
252
253 Weitere Möglichkeiten, die angezeigten Informationen auf der Startseite anzupassen:
254
255 **Beschreibung von der Detailseite ausblenden**
256
Carina Enke 1098.1 257 {{code language="none"}}
Carina Enke 1087.1 258 .root .resource-details .repo-desc {display: none;}
Carina Enke 1098.1 259 {{/code}}
Carina Enke 1087.1 260
261 **Kursverantwortliche ausblenden**
262
Carina Enke 1098.1 263 {{code language="none"}}
Carina Enke 1087.1 264 .root .resource-details .content-preview-author {display: none;}
Carina Enke 1098.1 265 {{/code}}
Carina Enke 1087.1 266
267 **Gesamten Bereich auf der Startseite ausblenden**
268
Carina Enke 1098.1 269 {{code language="none"}}
270 .root .resource-details {display: none;}
271
272 {{/code}}