Use your own course layout

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.

2

3

(% class="box warningmessage" %)

(((

Attention

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 .

8

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]].

)))

**Inhalt**

== Activate course layout ==

19

20

21

(% class="box infomessage" %)

22

(((

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.

24

)))

25

26

**Step 1: Upload CSS file to the course folder**

27

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.|(((

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

32

**Step 2: Embed CSS file**

33

34

To activate the course layout from this CSS file, proceed as follows:

35

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"]]

40

)))

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.

45

46

== Layout adjustment examples ==

Adjustments to match the corporate design

53

54

==== Replace logo in the header ====

55

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.

.logo {

width: 200px;

background-image: url(logo-bps.svg);

65

66

background-size: 150px;

}

==== 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

78

79

.page .mobile-page-header,

.nav-container,

.nav-container + .clearfix {

84

85

background-color: #008079;

}

==== Adjust font/icon colour of links and buttons ====

94

95

Choose a different colour for interaction options such as hover and focus to give users feedback.

a, .btn {

color: #008079;

}

a:hover, a:focus, a:active,

107

108

.btn:hover, .btn:focus, .btn:active {

color: #004A46;

}

[[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"]]

=== 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.

.nav-container {

display: none;

}

.mobile .nav-container {

display: block;

}

[[image:Kursdesign - Navigation ausblenden_de.png||alt="Hauptnavigation ausblenden" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]

=== Add a course background image ===

149

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]]

151

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.

#wrap {

background: url(background.jpg) no-repeat 0 0;

}

[[image:Kursdesign - Hintergrundbild_de.png||alt="Kurs mit Hintergrundbild" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]

=== Coloured course elements in the menu ===

169

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:

.jstree-default>.jstree-container-ul a.node-blog {

175

176

background: darkblue;

color: #fff;

}

Eine Liste der der restlichen Kursbausteine bietet die Seite [[CSS-Klassen der Kursbausteine>>doc:.CSS-Klassen der Kursbausteine.WebHome]]..

184

185

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**:

.jstree-default #id84915228820561_anchor {

191

192

background: darkblue;

color: #fff;

}

[[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"]]

=== Adjust status colours for course progress ===

206

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]].

208

209

210

**Adjust colours in the course menu**

211

212

213

.jstree-anchor.progress-0 {border-left-color: #fa9370;}

214

215

216

.jstree-anchor.progress-50 {border-left-color: #FBDFBD;}

217

218

219

.jstree-anchor.progress-100 {border-left-color: #5caa7f;}

220

221

222

**Adjust colours in the course element's header section**

223

224

225

.resource-header.progress-0 {border-left-color: #fa9370;}

226

227

228

.resource-header.progress-50 {border-left-color: #FBDFBD;}

229

230

231

.resource-header.progress-100 {border-left-color: #5caa7f;}

=== 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:

.iqself .run-container .btn-big .fonticon+span {display: none;}

245

246

.iqself .run-container .btn-big:after {content: "Mission starten";}

247

248

249

Use the **iqtest** class for a course element test:

.iqtest .run-container .btn-big .fonticon+span {display: none;}

254

255

.iqtest .run-container .btn-big:after {content: "Mission starten";}

=== ===

=== 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:

.iqself .run-container .box-light {display: none;}

[[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"]]

=== Hide assessment information for self-tests ===

278

279

Use the following code to hide all assessment information during self-tests (iqself class):

.iqself .assess-container {display: none;}

[[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"]]

=== Hide information on the course home page ===

293

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

298

299

.root .resource-details .content-preview-main>small {display: none;}

**Hide metadata**

.root .resource-details .content-preview-info {display: none;}

306

307

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"]]

309

310

311

Other ways to customise information displayed on the home page:

312

313

**Hide description in the detailed view**

.root .resource-details .repo-desc {display: none;}