Use your own course layout

Last modified by Carina Enke on 12.02.2024

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.


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 .

Make also sure that there is enough contrast between the font colour and the background to support accessibility.


Activate course layout

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.

 Step 1: Upload CSS file to the course folder

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.

Ablageordner im Kurseditor

Step 2: Embed CSS file

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

In the course view, open the Icon_zweiRädchen.png More settings menu at the top right of the course.

Einstellungen zum Kurs öffnen

Select the first entry: Settings. The Course settings dialogue opens.
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.Kursrun -CSS auswählen_de
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.Kursrun - gewählte CSS_de.png
Save your changes and close the dialogue.

Layout adjustment examples

Adjustments to match the corporate design

Replace logo in the header

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);

    background-size: 150px;


Change background colour of the navigation bar (incl. mobile version)

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.

.page .mobile-page-header,


.nav-container + .clearfix {

    background-color: #008079;


Adjust font/icon colour of links and buttons

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,

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

    color: #004A46;


Corporate Design Anpassungen

Hide main navigation

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;


Hauptnavigation ausblenden

Add a course background image

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. 

At W3Schools, you can find more information on how to embed background images in CSS.

#wrap {

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


Kurs mit Hintergrundbild

Coloured course elements in the menu

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 {

    background: darkblue;

    color: #fff;


Eine Liste der der restlichen Kursbausteine bietet die Seite CSS-Klassen der Kursbausteine..

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 {

    background: darkblue;

    color: #fff;


Beispiel zur CSS-Verwendung

Adjust status colours for course progress

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.

Adjust colours in the course menu

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

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

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

Adjust colours in the course element's header section

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

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

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

Rename the "Start test" button for self-tests

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;}

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

Use the iqtest class for a course element test:

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

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

Hide "Attempts" box next to the "Start test" button for self-tests

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;}

Beispiel zur CSS-Verwendung

Hide assessment information for self-tests

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

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

Beispiel zur CSS-Verwendung

Hide information on the course home page

To hide certain information such as the institution and semester or metadata, you can use the following code:

Hide institution and semester

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

Hide metadata

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

Beispiel zur CSS-Verwendung

Other ways to customise information displayed on the home page:

Hide description in the detailed view

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

Hide course owners

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

Hide entire section on the home page

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