Skip to end of metadata
Go to start of metadata

With the help of CSS, you can customise the layout of your course, for example, to fit the corporate design of your institution. Among other things, it is possible to adjust the font size 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 that not all changes may be visible at first glance.  

Also make sure that there is enough contrast between the text and the background.

To customise the course home page, you can also choose from some standard functions that do not require knowledge in CSS. 

Examples and configuration instructions (with and without CSS) and their effects were presented on the OPAL User Day (OUD). All content that emerged from this event can be accessed from the OER course OUD-19 Workshop I - Designing the course home page in the OPAL community.


Further information

Enable course layout

With the release OPAL 11.3, the function to change the course layout has become available in the new user interface. Instructions on how to enable the course layout in the old user interface can be found in the section Change course layout (old user interface).

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 will find the storage folder in the course editor on the right.

Course editor - Open storage folder

Step 2: Embed CSS file

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


Open the Icon Weitere Einstellungen More settings menu at the top right of the course.

Open course settings


Select the first entry Settings. This will open the Course settings dialogue.


In the course layout section, click on the expand icon within the From storage folder box. This will open a list of available CSS files. Now select your desired CSS file.

List of available CSS files


The selected file name will automatically appear in the selection box, which is now highlighted.

Storage folder with the used file name


Save your changes and close the dialogue.

Enable course layout (old user interface)


Create your own CSS file and upload it to the Storage folder of your course. You will find the storage folder in the course editor on the right.

Course editor - Open storage folder


Open your course in the course view. Click on the expand icon in the upper menu and select the entry Details and settings.

Open detailed view


In the detailed view, select the Change properties entry from the menu on the right.

Functions of the detailed view


Open the tab Course layout. 

Select course layout


In the section "Choose layout for this course", select the desired CSS file from your storage folder and click on Save.


Click on Close detailed view in the menu on the right. You will now see the course view and the adjusted course layout.

In addition to a CSS file from the storage folder, you can also use a system template or customise the layout using a form.
If you select the entry Customise, two CSS files will automatically be placed in your storage folder. You can also adapt the CSS files directly using the path storage folder/layout/customise. The main.css file influences the presentation of the learning platform as a whole, while the iframe.css file can for example be used to design your internal pages.

Layout adjustment examples

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

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. The example uses the ID 84915228820561:

.jstree-default #id84915228820561_anchor { background: darkblue; color: #fff; }

CSS usage example

Adjust the status colours to indicate course progress

Adjust the 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 the colours in the header section of the course element
.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 to start self-tests (class iqself), 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";}

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

You can hide the box with the information about the attempts at a solution, e.g. for self-tests (class iqself), with the following code:

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

CSS usage example

Hide assessment information for self-tests

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

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

CSS usage example

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

CSS usage example

Other ways to customise the displayed information on the home page:

Hide description from 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;}