Skip to Content

Wiki source code of Eigenes Kurslayout verwenden

Last modified by Carina Enke on 15.06.2026
Show last authors
1 {{section}}
2 {{column width="60%"}}
3 With the help of CSS, you can customise the appearance of your course to match the corporate design of your institution, for example. Among other things, it is possible to adjust font and background colours or to reposition certain buttons.
4
5 (% class="box warningmessage" %)
6 (((
7 Attention
8
9 You should only adjust the course layout if you have a good knowledge of HTML and CSS. Please note that many classes are used multiple times, and not all changes may be visible at first glance. Test your adjustments with different screen sizes and mobile devices .
10
11 Make also sure that there is enough [[contrast between the font colour and the background to support accessibility>>doc:LMS.Benutzerhandbuch OPAL.Barrierefreiheit.WebHome]].
12 )))
13 {{/column}}
14
15 {{column width="30%"}}
16 {{panel title="Content"}}
17 {{toc start="2" depth="3"/}}
18 {{/panel}}
19
20
21 {{/column}}
22 {{/section}}
23
24
25 == Activate course layout ==
26
27 (% class="box infomessage" %)
28 (((
29 With the release OPAL 11.3, the function to change the course layout has become available in the new user interface. How to activate the course layout in the old user interface is explained in the Activate course layout (old user interface) section.
30 )))
31
32 **Step 1: Upload CSS file to the course folder**
33
34 First create your own CSS file and upload it to the **course folder** of your course. You can find this folder in the course editor.
35
36 [[image:Kurseditor - Ablageordner öffnen_en.png||alt="Ablageordner im Kurseditor" data-xwiki-image-style-border="true"]]
37
38
39 **Step 2: Embed CSS file**
40
41 To activate the course layout from this CSS file, proceed as follows:
42
43 |(% colspan="1" %)(((
44 In the course view, open the [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_zweiRädchen.png||data-xwiki-image-style="img-icon"]] **More settings** menu at the top right of the course.
45 )))|(% rowspan="2" %)(((
46 [[image:Kursrun - Kurseinstellungen aufrufen_de.png||alt="Einstellungen zum Kurs öffnen" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="270" width="295"]]
47 )))
48 |Select the first entry: **Settings**. The **Course settings **dialogue opens.
49 |In the course layout section of this dialogue, click on the small triangle in the **From storage folder **box. A list of all available CSS files opens. Now select your desired CSS file.|[[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"]]
50 |In the course layout section of this dialogue, click on the small triangle in the **From storage folder **box. A list of all available CSS files opens. Now select your desired CSS file.|(% colspan="1" rowspan="2" %)[[image:Kursrun - gewählte CSS_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
51 |Save your changes and close the dialogue.
52
53
54
55 == Layout adjustment examples ==
56
57 Adjustments to match the corporate design
58
59 ==== Replace logo in the header ====
60
61 Place your logo (.png, .jpg, .svg) in the same folder as your CSS file. Adjust the width and the size of the image (background-size) if necessary. In the example, we use the "logo-bps.svg" logo.
62
63 {{code language="none"}}
64 .logo {
65     width: 200px;
66     background-image: url(logo-bps.svg);
67     background-size: 150px;
68 }
69 {{/code}}
70
71
72 ==== Change background colour of the navigation bar (incl. mobile version) ====
73
74 The font colour and the design of other elements are based on a dark navigation bar. If the background colour is light, you may have to adjust other elements. In the example, the colour of the header is also modified in the mobile version.
75
76 {{code language="none"}}
77 .page .mobile-page-header,
78 .nav-container,
79 .nav-container + .clearfix {
80 background-color: #008079;
81 }
82 {{/code}}
83
84
85 ==== Adjust font/icon colour of links and buttons ====
86
87 Choose a different colour for interaction options such as hover and focus to give users feedback.
88
89 {{code language="none"}}
90 a, .btn {
91 color: #008079;
92 }
93 a:hover, a:focus, a:active,
94 .btn:hover, .btn:focus, .btn:active {
95 color: #004A46;
96 }
97 {{/code}}
98
99 [[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"]]
100
101
102 === Hide main navigation ===
103
104 You can hide the navigation bar if necessary. Please note that the navigation to specific areas such as Teach & Learn or other opened courses is then no longer possible. For the mobile version, you should undo the hiding as shown in the example.
105
106 {{code language="none"}}
107 .nav-container {
108 display: none;
109 }
110 .mobile .nav-container {
111 display: block;
112 }
113 {{/code}}
114
115
116 [[image:Kursdesign - Navigation ausblenden_de.png||alt="Hauptnavigation ausblenden" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
117
118
119 === Add a course background image ===
120
121 Place your background image (.png, .jpg, .svg) in the same folder as your CSS file. Pay attention to the file size to allow the course to load quickly. [[Further file size information.>>doc:LMS.Benutzerhandbuch OPAL.Barrierefreiheit.WebHome]]
122
123 At [[W3Schools>>url:https://www.w3schools.com/cssref/css3_pr_background.asp]], you can find more information on how to embed background images in CSS.
124
125 {{code language="none"}}
126 #wrap {
127 background: url(background.jpg) no-repeat 0 0;
128 }
129 {{/code}}
130
131 [[image:Kursdesign - Hintergrundbild_de.png||alt="Kurs mit Hintergrundbild" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
132
133
134 === Coloured course elements in the menu ===
135
136 If you wish to highlight all course elements of the same type, e. g. all blogs in the menu on the left, use the following code:
137
138 {{code language="none"}}
139 .jstree-default>.jstree-container-ul a.node-blog {
140 background: darkblue;
141 color: #fff;
142 }
143 {{/code}}
144
145 Eine Liste der der restlichen Kursbausteine bietet die Seite [[CSS-Klassen der Kursbausteine>>doc:.CSS-Klassen der Kursbausteine.WebHome]]..
146
147
148 If you only wish to highlight a particular course element in the menu, e. g. the final test, you can use the ID of the course element. In the example, the ID reads **84915228820561**:
149
150 {{code language="none"}}
151 .jstree-default #id84915228820561_anchor {
152 background: darkblue;
153 color: #fff;
154 }
155 {{/code}}
156
157 [[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"]]
158
159
160
161
162 === Adjust status colours for course progress ===
163
164 The progress for individual course elements is displayed in the course menu and the upper area of the content. You can customise the colours via //border-left-color//. [[Further information on the course progress indicator>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurs bearbeiten.Kursfortschritt.WebHome]].
165
166 **Adjust colours in the course menu**
167
168 {{code language="none"}}
169 .jstree-anchor.progress-0 {border-left-color: #fa9370;}
170 .jstree-anchor.progress-50 {border-left-color: #FBDFBD;}
171 .jstree-anchor.progress-100 {border-left-color: #5caa7f;}
172 {{/code}}
173
174 **Adjust colours in the course element's header section**
175
176 {{code language="none"}}
177 .resource-header.progress-0 {border-left-color: #fa9370;}
178 .resource-header.progress-50 {border-left-color: #FBDFBD;}
179 .resource-header.progress-100 {border-left-color: #5caa7f;}
180 {{/code}}
181
182 (% class="wikigeneratedid" %)
183
184
185 === Rename the "Start test" button for self-tests ===
186
187 If you wish to rename the button for starting self-tests (iqself class), e. g. from **Start test **to **Start mission**, you can use the following code:
188
189 {{code language="none"}}
190 .iqself .run-container .btn-big .fonticon+span {display: none;}
191 .iqself .run-container .btn-big:after {content: "Mission starten";}
192 {{/code}}
193
194 Use the **iqtest** class for a course element test:
195
196 {{code language="none"}}
197 .iqtest .run-container .btn-big .fonticon+span {display: none;}
198 .iqtest .run-container .btn-big:after {content: "Mission starten";}
199 {{/code}}
200
201 {{warning}}
202 CSS is used to present content, such as layout, colours, spacing, fonts, or the showing and hiding of elements. Although CSS can be used to display other content via ::before or ::after, or to visually hide existing text, this is not a clean or accessible solution:
203
204 * The original text technically remains present in the DOM
205 * Screen readers and search functions still access the original text
206 * Updates can affect such workarounds at any time
207
208 To truly modify system messages, adjustments must be made to the language resources or through software changes.
209
210 In some cases, additional explanations in the module’s description text (e.g. with notes such as ‘In the context of this application process, “solution” refers to your application documents’) can be helpful.
211 {{/warning}}
212
213
214 === Hide "Attempts" box next to the "Start test" button for self-tests ===
215
216 You can hide the box with information about the attempts at a solution, e. g. for self-tests (iqself class), with the following code:
217
218 {{code language="none"}}
219 .iqself .run-container .box-light {display: none;}
220 {{/code}}
221
222 [[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"]]
223
224
225
226 === Hide assessment information for self-tests ===
227
228 Use the following code to hide all assessment information during self-tests (iqself class):
229
230 {{code language="none"}}
231 .iqself .assess-container {display: none;}
232 {{/code}}
233
234 [[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"]]
235
236
237 === Hide information on the course home page ===
238
239 To hide certain information such as the institution and semester or metadata, you can use the following code:
240
241 **Hide institution and semester**
242
243 {{code language="none"}}
244 .root .resource-details .content-preview-main>small {display: none;}
245 {{/code}}
246
247 **Hide metadata**
248
249 {{code language="none"}}
250 .root .resource-details .content-preview-info {display: none;}
251 {{/code}}
252
253 [[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"]]
254
255
256 Other ways to customise information displayed on the home page:
257
258 **Hide description in the detailed view**
259
260 {{code language="none"}}
261 .root .resource-details .repo-desc {display: none;}
262 {{/code}}
263
264 **Hide course owners**
265
266 {{code language="none"}}
267 .root .resource-details .content-preview-author {display: none;}
268 {{/code}}
269
270 **Hide entire section on the home page**
271
272 {{code language="none"}}
273 .root .resource-details {display: none;}
274
275 {{/code}}