Zum Inhalt springen

Wiki-Quellcode von Eigenes Kurslayout verwenden

Version 1104.1 von Carina Enke am 10.06.2026
Zeige letzte Bearbeiter
1 {{section}}
2 {{column width="60%"}}
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
11 Achten Sie zur Unterstützung der Barrierefreiheit außerdem auf einen ausreichenden [[Kontrast zwischen Schriftfarbe und Hintergrund>>doc:LMS.Benutzerhandbuch OPAL.Barrierefreiheit.WebHome]].
12 )))
13 {{/column}}
14
15 {{column width="30%"}}
16 {{panel title="Inhalt"}}
17 {{toc depth="3" start="2"/}}
18 {{/panel}}
19 {{/column}}
20 {{/section}}
21
22
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
32 |(% style="width:1130px" %)(((
33 Erstellen Sie zunächst Ihre eigene CSS-Datei und laden Sie diese in den **Kursordner** Ihres Kurses hoch. Diesen finden Sie im Kurseditor.
34 )))|(% style="width:600px" %)(((
35 [[image:Kurseditor - Aufruf Kursablageordner_de.png||alt="Ablageordner im Kurseditor" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
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
42 |(% style="width:962px" %)(((
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.
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"]]
45 |(% style="width:962px" %)Wählen Sie den ersten Eintrag **Einstellungen **aus. Es öffnet sich der Dialog **Kurseinstellungen**.
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" %)(((
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"]]
48 )))
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"]]
50 |(% style="width:962px" %)Speichern Sie Ihre Änderungen und schließen Sie den Dialog.
51
52 == Beispiele für Layoutanpassungen ==
53
54 === (% style="color:inherit; font-family:inherit; font-size:max(18px, min(22px, 10.8889px + 0.925926vw))" %)Anpassungen an das Corporate Design(%%) ===
55
56 ==== Logo im Header austauschen ====
57
58 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".
59
60
61 {{code language="none"}}
62 .logo {
63     width: 200px;
64     background-image: url(logo-bps.svg);
65     background-size: 150px;
66 }
67 {{/code}}
68
69
70 ==== Hintergrundfarbe der Navigationsleiste ändern (inkl. mobile Version) ====
71
72 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.
73
74 {{code language="none"}}
75 .page .mobile-page-header,
76 .nav-container,
77 .nav-container + .clearfix {
78 background-color: #008079;
79 }
80 {{/code}}
81
82
83 ==== Schrift-/Icon-Farbe von Links und Buttons anpassen ====
84
85 Wählen Sie für die Interaktionsmöglichkeiten wie hover und focus eine andere Farbe, um Nutzenden Feedback zu geben.
86
87
88 {{code language="none"}}
89 a, .btn {color: #008079;}
90 a:hover, a:focus, a:active,
91 .btn:hover, .btn:focus, .btn:active {color: #004A46;}
92 {{/code}}
93
94
95
96 [[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"]]
97
98
99
100 === Hauptnavigation ausblenden ===
101
102 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.
103
104
105 {{code language="none"}}
106 .nav-container {display: none;}
107 .mobile .nav-container {display: block;}
108 {{/code}}
109
110
111 [[image:Kursdesign - Navigation ausblenden_de.png||alt="Hauptnavigation ausblenden" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
112
113
114 === Hintergrundbild für den Kurs einbinden ===
115
116 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]]
117
118 Bei [[W3Schools>>url:https://www.w3schools.com/cssref/css3_pr_background.asp]] finden Sie weitere Informationen zum Einbinden von Hintergrundbildern in CSS.
119
120
121 {{code language="none"}}
122 #wrap {
123 background: url(background.jpg) no-repeat 0 0;
124 }
125 {{/code}}
126
127 [[image:Kursdesign - Hintergrundbild_de.png||alt="Kurs mit Hintergrundbild" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
128
129
130 === Einfärben von Kursbausteinen im Menü ===
131
132 Wenn Sie alle Kursbausteine eines Typs, z. B. alle Blogs im Menü auf der linken Seite, hervorheben möchten, nutzen Sie folgenden Code:
133
134
135 {{code language="none"}}
136 .jstree-default>.jstree-container-ul a.node-blog {
137 background: darkblue;
138 color: #fff;
139 }
140 {{/code}}
141
142 Eine Liste der der restlichen Kursbausteine bietet die Seite [[CSS-Klassen der Kursbausteine>>doc:.CSS-Klassen der Kursbausteine.WebHome]].
143
144 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:
145
146 {{code language="none"}}
147 .jstree-default #id84915228820561_anchor {
148 background: darkblue;
149 color: #fff;
150 }
151 {{/code}}
152
153
154 [[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"]]
155
156
157 === Status-Farben für den Kursfortschritt anpassen ===
158
159 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]].
160
161
162 **Farben im Kursmenü anpassen**
163
164 {{code language="none"}}
165 .jstree-anchor.progress-0 {border-left-color: #fa9370;}
166 .jstree-anchor.progress-50 {border-left-color: #FBDFBD;}
167 .jstree-anchor.progress-100 {border-left-color: #5caa7f;}
168 {{/code}}
169
170 **Farben im Kopfbereich des Kursbausteins anpassen**
171
172 {{code language="none"}}
173 .resource-header.progress-0 {border-left-color: #fa9370;}
174 .resource-header.progress-50 {border-left-color: #FBDFBD;}
175 .resource-header.progress-100 {border-left-color: #5caa7f;}
176 {{/code}}
177
178
179
180 === Button "Test starten" für Tests oder Selbsttests umbenennen ===
181
182 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:
183
184 {{code language="none"}}
185 .iqself .run-container .btn-big .fonticon+span {display: none;}
186 .iqself .run-container .btn-big:after {content: "Mission starten";}
187 {{/code}}
188
189 Für einen Kursbaustein Test nutzen Sie die Klasse iqtest:
190
191 {{code language="none"}}
192 .iqtest .run-container .btn-big .fonticon+span {display: none;}
193 .iqtest .run-container .btn-big:after {content: "Mission starten";}
194 {{/code}}
195
196 {{warning}}
197 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:
198
199 * der Originaltext bleibt technisch weiterhin im DOM bestehen
200 * Screenreader und Suchfunktionen greifen weiterhin auf den Originaltext zu
201 * Updates können solche Workarounds jederzeit beeinträchtigen
202
203 Eine echte Änderung von Systemmeldungen ist nur über die Anpassungen der Sprachressourcen bzw. durch eine Softwareanpassung möglich.
204
205 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.
206 {{/warning}}
207
208
209
210 === Box "Lösungsversuche" neben dem Button "Test starten" für Selbsttests ausblenden ===
211
212 Sie können die Box mit den Informationen zu den Lösungsversuchen z. B. für Selbsttests (Klasse iqself) mit folgendem Code ausblenden:
213
214 {{code language="none"}}
215 .iqself .run-container .box-light {display: none;}
216 {{/code}}
217
218 [[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"]]
219
220
221 === Bewertungsinformationen für Selbsttests ausblenden ===
222
223 Nutzen Sie folgenden Code, um alle Bewertungsinformationen bei Selbsttests (Klasse iqself) auszublenden:
224
225 {{code language="none"}}
226 .iqself .assess-container {display: none;}
227 {{/code}}
228
229 [[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"]]
230
231
232 === Informationen auf der Startseite des Kurses ausblenden ===
233
234 Um z. B. die Angaben zur Institution und zum Semester sowie die Metadaten auszublenden, können Sie den folgenden Code verwenden:
235
236 **Institution und Semester ausblenden**
237
238 {{code language="none"}}
239 .root .resource-details .content-preview-main>small {display: none;}
240 {{/code}}
241
242 **Metadaten ausblenden**
243
244 {{code language="none"}}
245 .root .resource-details .content-preview-info {display: none;}
246 {{/code}}
247
248 [[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"]]
249
250
251 Weitere Möglichkeiten, die angezeigten Informationen auf der Startseite anzupassen:
252
253 **Beschreibung von der Detailseite ausblenden**
254
255 {{code language="none"}}
256 .root .resource-details .repo-desc {display: none;}
257 {{/code}}
258
259 **Kursverantwortliche ausblenden**
260
261 {{code language="none"}}
262 .root .resource-details .content-preview-author {display: none;}
263 {{/code}}
264
265 **Gesamten Bereich auf der Startseite ausblenden**
266
267 {{code language="none"}}
268 .root .resource-details {display: none;}
269
270 {{/code}}