Wiki source code of 05 Eigenes Kurslayout verwenden

Last modified by Carina Enke on 12.02.2024

version	line-number	content
1099.1	1	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.
1086.1	2
	3	(% class="box warningmessage" %)
	4	(((
1099.1	5	Attention
1086.1	6
1099.1	7	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 .
1086.1	8
1099.1	9	Make also sure that there is enough [[contrast between the font colour and the background to support accessibility>>doc:LMS.Benutzerhandbuch OPAL.Barrierefreiheit.WebHome]].
1086.1	10	)))
	11
	12
1099.1	13	Inhalt
1086.1	14
1099.1	15	{{toc/}}
	16
	17
	18	== Activate course layout ==
	19
	20
1086.1	21	(% class="box infomessage" %)
	22	(((
1099.1	23	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.
1086.1	24	)))
	25
1099.1	26	Step 1: Upload CSS file to the course folder
1086.1	27
1099.1	28	\|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.\|(((
1086.1	29	[[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"]]
	30	)))
	31
1099.1	32	Step 2: Embed CSS file
1086.1	33
1099.1	34	To activate the course layout from this CSS file, proceed as follows:
1086.1	35
1099.1	36	\|(% colspan="1" %)(((
	37	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.
	38	)))\|(% rowspan="2" %)(((
	39	[[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"]]
1086.1	40	)))
1099.1	41	\|Select the first entry: Settings. The Course settings dialogue opens.
	42	\|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"]]
	43	\|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"]]
	44	\|Save your changes and close the dialogue.
1086.1	45
1099.1	46	== Layout adjustment examples ==
1086.1	47
	48
1098.1	49	{{toc scope="LOCAL"/}}
1086.1	50
	51
1099.1	52	Adjustments to match the corporate design
1089.1	53
1099.1	54	==== Replace logo in the header ====
1086.1	55
1099.1	56	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.
1086.1	57
1087.2	58
1098.1	59	{{code language="none"}}
1086.1	60	.logo {
1099.1	61
1098.1	62	width: 200px;
1099.1	63
1098.1	64	background-image: url(logo-bps.svg);
1099.1	65
1098.1	66	background-size: 150px;
1099.1	67
1086.1	68	}
1098.1	69	{{/code}}
1086.1	70
1087.2	71
1086.1	72
	73
1099.1	74	==== Change background colour of the navigation bar (incl. mobile version) ====
	75
	76	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.
	77
1098.1	78	{{code language="none"}}
1086.1	79	.page .mobile-page-header,
1099.1	80
1086.1	81	.nav-container,
1099.1	82
1086.1	83	.nav-container + .clearfix {
1099.1	84
1086.1	85	background-color: #008079;
1099.1	86
1086.1	87	}
1098.1	88	{{/code}}
1086.1	89
1087.2	90
1086.1	91
	92
1099.1	93	==== Adjust font/icon colour of links and buttons ====
1087.3	94
1099.1	95	Choose a different colour for interaction options such as hover and focus to give users feedback.
	96
	97
1098.1	98	{{code language="none"}}
1099.1	99	a, .btn {
	100
	101	color: #008079;
	102
	103	}
	104
	105
1086.1	106	a:hover, a:focus, a:active,
	107
1099.1	108	.btn:hover, .btn:focus, .btn:active {
1087.3	109
1099.1	110	color: #004A46;
1086.1	111
1099.1	112	}
	113	{{/code}}
	114
1098.1	115	[[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"]]
1087.1	116
	117
1089.1	118
1087.1	119
	120
1087.2	121
1099.1	122
	123	=== Hide main navigation ===
	124
	125	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.
	126
	127
1098.1	128	{{code language="none"}}
1099.1	129	.nav-container {
	130
	131	display: none;
	132
	133	}
	134
	135	.mobile .nav-container {
	136
	137	display: block;
	138
	139	}
1098.1	140	{{/code}}
1087.1	141
	142
1098.1	143	[[image:Kursdesign - Navigation ausblenden_de.png\|\|alt="Hauptnavigation ausblenden" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
1087.1	144
1089.1	145
1087.1	146
	147
1099.1	148	=== Add a course background image ===
1087.1	149
1099.1	150	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]]
1087.2	151
1099.1	152	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.
	153
	154
1098.1	155	{{code language="none"}}
1087.1	156	#wrap {
1099.1	157
1087.1	158	background: url(background.jpg) no-repeat 0 0;
1099.1	159
1087.1	160	}
1098.1	161	{{/code}}
1087.1	162
1098.1	163	[[image:Kursdesign - Hintergrundbild_de.png\|\|alt="Kurs mit Hintergrundbild" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
1087.1	164
1089.1	165
1087.1	166
	167
1099.1	168	=== Coloured course elements in the menu ===
1087.2	169
1099.1	170	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:
	171
	172
1098.1	173	{{code language="none"}}
1087.1	174	.jstree-default>.jstree-container-ul a.node-blog {
1099.1	175
1087.1	176	background: darkblue;
1099.1	177
1087.1	178	color: #fff;
1099.1	179
1087.1	180	}
1098.1	181	{{/code}}
1087.1	182
1099.1	183	Eine Liste der der restlichen Kursbausteine bietet die Seite [[CSS-Klassen der Kursbausteine>>doc:.CSS-Klassen der Kursbausteine.WebHome]]..
1087.1	184
	185
1099.1	186	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:
	187
	188
1098.1	189	{{code language="none"}}
1087.1	190	.jstree-default #id84915228820561_anchor {
1099.1	191
1087.1	192	background: darkblue;
1099.1	193
1087.1	194	color: #fff;
1099.1	195
1087.1	196	}
1098.1	197	{{/code}}
1087.1	198
	199
1098.1	200	[[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"]]
1087.1	201
1089.1	202
1087.1	203
	204
1099.1	205	=== Adjust status colours for course progress ===
1089.2	206
1099.1	207	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]].
1087.1	208
1099.1	209
	210	Adjust colours in the course menu
	211
1098.1	212	{{code language="none"}}
1087.1	213	.jstree-anchor.progress-0 {border-left-color: #fa9370;}
1099.1	214
	215
1087.1	216	.jstree-anchor.progress-50 {border-left-color: #FBDFBD;}
1099.1	217
	218
1087.1	219	.jstree-anchor.progress-100 {border-left-color: #5caa7f;}
1098.1	220	{{/code}}
1087.1	221
1099.1	222	Adjust colours in the course element's header section
1087.1	223
1098.1	224	{{code language="none"}}
1087.1	225	.resource-header.progress-0 {border-left-color: #fa9370;}
1099.1	226
	227
1087.1	228	.resource-header.progress-50 {border-left-color: #FBDFBD;}
1099.1	229
	230
1087.1	231	.resource-header.progress-100 {border-left-color: #5caa7f;}
1098.1	232	{{/code}}
1087.1	233
	234
	235
	236
1099.1	237
	238	=== Rename the "Start test" button for self-tests ===
	239
	240	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:
	241
	242
1098.1	243	{{code language="none"}}
1087.1	244	.iqself .run-container .btn-big .fonticon+span {display: none;}
1099.1	245
1087.1	246	.iqself .run-container .btn-big:after {content: "Mission starten";}
1098.1	247	{{/code}}
1087.1	248
1099.1	249	Use the iqtest class for a course element test:
1087.1	250
1099.1	251
1098.1	252	{{code language="none"}}
1087.1	253	.iqtest .run-container .btn-big .fonticon+span {display: none;}
1099.1	254
1087.1	255	.iqtest .run-container .btn-big:after {content: "Mission starten";}
1098.1	256	{{/code}}
1087.1	257
1089.2	258
1087.1	259
1099.1	260	=== ===
1087.1	261
1099.1	262	=== Hide "Attempts" box next to the "Start test" button for self-tests ===
	263
	264	You can hide the box with information about the attempts at a solution, e. g. for self-tests (iqself class), with the following code:
	265
	266
1098.1	267	{{code language="none"}}
1087.1	268	.iqself .run-container .box-light {display: none;}
1098.1	269	{{/code}}
1087.1	270
1099.1	271
1098.1	272	[[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"]]
1087.1	273
1089.1	274
1087.1	275
	276
1099.1	277	=== Hide assessment information for self-tests ===
	278
	279	Use the following code to hide all assessment information during self-tests (iqself class):
	280
	281
1098.1	282	{{code language="none"}}
1087.1	283	.iqself .assess-container {display: none;}
1098.1	284	{{/code}}
1087.1	285
1099.1	286
1098.1	287	[[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"]]
1087.1	288
	289
	290
	291
1099.1	292	=== Hide information on the course home page ===
1087.1	293
1099.1	294	To hide certain information such as the institution and semester or metadata, you can use the following code:
	295
	296	Hide institution and semester
	297
1098.1	298	{{code language="none"}}
1087.1	299	.root .resource-details .content-preview-main>small {display: none;}
1098.1	300	{{/code}}
1087.1	301
1099.1	302	Hide metadata
1087.1	303
1098.1	304	{{code language="none"}}
1087.1	305	.root .resource-details .content-preview-info {display: none;}
1098.1	306	{{/code}}
1087.1	307
1098.1	308	[[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"]]
1087.1	309
	310
1099.1	311	Other ways to customise information displayed on the home page:
1087.1	312
1099.1	313	Hide description in the detailed view
1087.1	314
1099.1	315
1098.1	316	{{code language="none"}}
1087.1	317	.root .resource-details .repo-desc {display: none;}
1098.1	318	{{/code}}
1087.1	319
1099.1	320	Hide course owners
1087.1	321
1098.1	322	{{code language="none"}}
1087.1	323	.root .resource-details .content-preview-author {display: none;}
1098.1	324	{{/code}}
1087.1	325
1099.1	326	Hide entire section on the home page
1087.1	327
1098.1	328	{{code language="none"}}
	329	.root .resource-details {display: none;}
	330
	331	{{/code}}

Wiki source code of 05 Eigenes Kurslayout verwenden

Search

OPALGlobal

OPALMenü

Recently Visited