Zum Inhalt springen
Version 1097.4 von Carina Enke am 13.05.2024
Zeige letzte Bearbeiter
1 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.
2
3 (% class="box warningmessage" %)
4 (((
5 **Achtung**
6
7 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.
8
9 Achten Sie zur Unterstützung der Barrierefreiheit außerdem auf einen ausreichenden [[Kontrast zwischen Schriftfarbe und Hintergrund>>path:/wiki/bin/view/LMS/Benutzerhandbuch%20OPAL/Barrierefreiheit/]].
10 )))
11
12
13 == Kurslayout aktivieren ==
14
15 (% class="box infomessage" %)
16 (((
17 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).
18 )))
19
20 **Schritt 1: CSS-Datei in den Kursordner laden**
21
22 |(% style="width:773px" %)(((
23 Erstellen Sie zunächst Ihre eigene CSS-Datei und laden Sie diese in den **Kursordner** Ihres Kurses hoch. Diesen finden Sie im Kurseditor.
24 )))|(% style="width:381px" %)(((
25 [[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" width="400"]]
26 )))
27
28 **Schritt 2: CSS-Datei einbinden**
29
30 Um das Kurslayout aus dieser CSS-Datei zu aktivieren, gehen Sie nun wie folgt vor:
31
32 (% style="width:1367px" %)
33 |(% style="width:962px" %)(((
34 Öffnen Sie in der Kursansicht das Menü [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Icons/WebHome/Icon_zweiR%C3%A4dchen.png?rev=1.2||alt="Icon_zweiRädchen.png" data-xwiki-image-style="img-icon"]] **Weitere Einstellungen** oben rechts im Kurs.
35 )))|(% colspan="1" rowspan="2" style="width:507px" %)[[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursrun%20-%20Kurseinstellungen%20aufrufen_de.png?width=295&height=270&rev=1.2||alt="Einstellungen zum Kurs öffnen" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="270" width="295"]]
36 |(% style="width:962px" %)Wählen Sie den ersten Eintrag **Einstellungen **aus. Es öffnet sich der Dialog **Kurseinstellungen**.
37 |(% 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" %)(((
38 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursrun%20-%20CSS%20ausw%C3%A4hlen_de.png?width=500&rev=1.2||alt="Kursrun -CSS auswählen_de" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
39 )))
40 |(% style="width:962px" %)Automatisch erscheint der gewählte Dateiname in der nun farbig hervorgehobenen Auswahlbox.|(% colspan="1" rowspan="2" style="width:507px" %)[[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursrun%20-%20gew%C3%A4hlte%20CSS_de.png?width=500&rev=1.2||alt="Kursrun - gewählte CSS_de.png" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
41 |(% style="width:962px" %)Speichern Sie Ihre Änderungen und schließen Sie den Dialog.
42
43 == Beispiele für Layoutanpassungen ==
44
45
46 (% class="wikitoc" %)
47 * [[Anpassungen an das Corporate Design>>path:#HAnpassungenandasCorporateDesign]]
48 ** [[Logo im Header austauschen>>path:#HLogoimHeaderaustauschen]]
49 ** [[Hintergrundfarbe der Navigationsleiste ändern (inkl. mobile Version)>>path:#HHintergrundfarbederNavigationsleisteE4ndern28inkl.mobileVersion29]]
50 ** [[Schrift-/Icon-Farbe von Links und Buttons anpassen>>path:#HSchrift-2FIcon-FarbevonLinksundButtonsanpassen]]
51 * [[Hauptnavigation ausblenden>>path:#HHauptnavigationausblenden]]
52 * [[Hintergrundbild für den Kurs einbinden>>path:#HHintergrundbildfFCrdenKurseinbinden]]
53 * [[Einfärben von Kursbausteinen im Menü>>path:#HEinfE4rbenvonKursbausteinenimMenFC]]
54 * [[Status-Farben für den Kursfortschritt anpassen>>path:#HStatus-FarbenfFCrdenKursfortschrittanpassen]]
55 * [[Button "Test starten" für Tests oder Selbsttests umbenennen>>path:#HButton22Teststarten22fFCrTestsoderSelbsttestsumbenennen]]
56 * [[Box "Lösungsversuche" neben dem Button "Test starten" für Selbsttests ausblenden>>path:#HBox22LF6sungsversuche22nebendemButton22Teststarten22fFCrSelbsttestsausblenden]]
57 * [[Bewertungsinformationen für Selbsttests ausblenden>>path:#HBewertungsinformationenfFCrSelbsttestsausblenden]]
58 * [[Informationen auf der Startseite des Kurses ausblenden>>path:#HInformationenaufderStartseitedesKursesausblenden]]
59
60
61 === (% style="color:inherit; font-family:inherit; font-size:max(18px, min(22px, 10.8889px + 0.925926vw))" %)Anpassungen an das Corporate Design(%%) ===
62
63 ==== Logo im Header austauschen ====
64
65 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".
66
67
68 (% class="box" %)
69 (((
70 (% class="code" %)
71 (((
72 .logo {
73 width: 200px;
74 background-image~: url(logo-bps.svg);
75 background-size: 150px;
76 }
77 )))
78 )))
79
80
81 ==== Hintergrundfarbe der Navigationsleiste ändern (inkl. mobile Version) ====
82
83 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.
84
85 (% class="box" %)
86 (((
87 (% class="code" %)
88 (((
89 .page .mobile-page-header,
90 .nav-container,
91 .nav-container + .clearfix {
92 background-color: #008079;
93 }
94 )))
95 )))
96
97
98 ==== Schrift-/Icon-Farbe von Links und Buttons anpassen ====
99
100 Wählen Sie für die Interaktionsmöglichkeiten wie hover und focus eine andere Farbe, um Nutzer*innen Feedback zu geben.
101
102
103 (% class="box" %)
104 (((
105 (% class="code" %)
106 (((
107 a, .btn {color: #008079;}
108 a:hover, a:focus, a:active,
109 .btn:hover, .btn:focus, .btn:active {color: #004A46;}
110 )))
111 )))
112
113
114
115 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursdesign%20-%20Logo%20und%20Farben_de.png?width=778&height=300&rev=1.2||alt="Corporate Design Anpassungen" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="300" width="778"]]
116
117
118
119 === Hauptnavigation ausblenden ===
120
121 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.
122
123
124 (% class="box" %)
125 (((
126 (% class="code" %)
127 (((
128 .nav-container {display: none;}
129 .mobile .nav-container {display: block;}
130 )))
131 )))
132
133
134 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursdesign%20-%20Navigation%20ausblenden_de.png?width=500&rev=1.2||alt="Hauptnavigation ausblenden" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
135
136
137 === Hintergrundbild für den Kurs einbinden ===
138
139 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]]
140
141 Bei [[W3Schools>>url:https://www.w3schools.com/cssref/css3_pr_background.asp]] finden Sie weitere Informationen zum Einbinden von Hintergrundbildern in CSS.
142
143
144 (% class="box" %)
145 (((
146 (% class="code" %)
147 (((
148 #wrap {
149 background: url(background.jpg) no-repeat 0 0;
150 }
151 )))
152 )))
153
154 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursdesign%20-%20Hintergrundbild_de.png?width=500&rev=1.2||alt="Kurs mit Hintergrundbild" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
155
156
157 === Einfärben von Kursbausteinen im Menü ===
158
159 Wenn Sie alle Kursbausteine eines Typs, z. B. alle Blogs im Menü auf der linken Seite, hervorheben möchten, nutzen Sie folgenden Code:
160
161
162 (% class="box" %)
163 (((
164 (% class="code" %)
165 (((
166 .jstree-default>.jstree-container-ul a.node-blog {
167 background: darkblue;
168 color: #fff;
169 }
170 )))
171 )))
172
173 Eine Liste der der restlichen Kursbausteine bietet die Seite [[CSS-Klassen der Kursbausteine>>path:/wiki/bin/view/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/CSS-Klassen%20der%20Kursbausteine/]].
174
175 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:
176
177 (% class="box" %)
178 (((
179 (% class="code" %)
180 (((
181 .jstree-default #id84915228820561_anchor {
182 background: darkblue;
183 color: #fff;
184 }
185 )))
186 )))
187
188
189 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursrun%20-%20Men%C3%BC%20mit%20Beispiel%20CSS_de.png?width=500&rev=1.2||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
190
191
192 === Status-Farben für den Kursfortschritt anpassen ===
193
194 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>>path:/wiki/bin/view/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurs%20bearbeiten/Kursfortschritt/]].
195
196
197 **Farben im Kursmenü anpassen**
198
199 (% class="box" %)
200 (((
201 (% class="code" %)
202 (((
203 .jstree-anchor.progress-0 {border-left-color: #fa9370;}
204 .jstree-anchor.progress-50 {border-left-color: #FBDFBD;}
205 .jstree-anchor.progress-100 {border-left-color: #5caa7f;}
206 )))
207 )))
208
209 **Farben im Kopfbereich des Kursbausteins anpassen**
210
211 (% class="box" %)
212 (((
213 (% class="code" %)
214 (((
215 .resource-header.progress-0 {border-left-color: #fa9370;}
216 .resource-header.progress-50 {border-left-color: #FBDFBD;}
217 .resource-header.progress-100 {border-left-color: #5caa7f;}
218 )))
219 )))
220
221
222 === Button "Test starten" für Tests oder Selbsttests umbenennen ===
223
224 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:
225
226 (% class="box" %)
227 (((
228 (% class="code" %)
229 (((
230 .iqself .run-container .btn-big .fonticon+span {display: none;}
231 .iqself .run-container .btn-big:after {content: "Mission starten";}
232 )))
233 )))
234
235 Für einen Kursbaustein Test nutzen Sie die Klasse iqtest:
236
237 (% class="box" %)
238 (((
239 (% class="code" %)
240 (((
241 .iqtest .run-container .btn-big .fonticon+span {display: none;}
242 .iqtest .run-container .btn-big:after {content: "Mission starten";}
243 )))
244 )))
245
246
247 === Box "Lösungsversuche" neben dem Button "Test starten" für Selbsttests ausblenden ===
248
249 Sie können die Box mit den Informationen zu den Lösungsversuchen z. B. für Selbsttests (Klasse iqself) mit folgendem Code ausblenden:
250
251 (% class="box" %)
252 (((
253 (% class="code" %)
254 (((
255 .iqself .run-container .box-light {display: none;}
256 )))
257 )))
258
259 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursrun%20-%20Test-Infobox%20per%20CSS%20ausblenden_de.png?width=500&rev=1.2||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
260
261
262 === Bewertungsinformationen für Selbsttests ausblenden ===
263
264 Nutzen Sie folgenden Code, um alle Bewertungsinformationen bei Selbsttests (Klasse iqself) auszublenden:
265
266 (% class="box" %)
267 (((
268 (% class="code" %)
269 (((
270 .iqself .assess-container {display: none;}
271 )))
272 )))
273
274 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursrun%20-%20Bewertungsbox%20per%20CSS%20ausblenden_de.png?width=500&rev=1.2||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
275
276
277 === Informationen auf der Startseite des Kurses ausblenden ===
278
279 Um z. B. die Angaben zur Institution und zum Semester sowie die Metadaten auszublenden, können Sie den folgenden Code verwenden:
280
281 **Institution und Semester ausblenden**
282
283 (% class="box" %)
284 (((
285 (% class="code" %)
286 (((
287 .root .resource-details .content-preview-main>small {display: none;}
288 )))
289 )))
290
291 **Metadaten ausblenden**
292
293 (% class="box" %)
294 (((
295 (% class="code" %)
296 (((
297 .root .resource-details .content-preview-info {display: none;}
298 )))
299 )))
300
301 [[image:/wiki/bin/download/LMS/Benutzerhandbuch%20OPAL/Lehren/Kurs/Kurseinstellungen/Kurslayout/WebHome/Kursrun%20-%20Infobox-CSS_de.png?width=500&rev=1.2||alt="Beispiel zur CSS-Verwendung" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
302
303
304 Weitere Möglichkeiten, die angezeigten Informationen auf der Startseite anzupassen:
305
306 **Beschreibung von der Detailseite ausblenden**
307
308 (% class="box" %)
309 (((
310 (% class="code" %)
311 (((
312 .root .resource-details .repo-desc {display: none;}
313 )))
314 )))
315
316 **Kursverantwortliche ausblenden**
317
318 (% class="box" %)
319 (((
320 (% class="code" %)
321 (((
322 .root .resource-details .content-preview-author {display: none;}
323 )))
324 )))
325
326 **Gesamten Bereich auf der Startseite ausblenden**
327
328 (% class="box" %)
329 (((
330 (% class="code" %)
331 (((
332 .root .resource-details {display: none;}\\
333 )))
334 )))