Page tree
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. 

Both 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 informationen

Enable course layout

With the release OPAL 11.3, the function for changing 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 under Change course layout (old user interface).

First create your own CSS file and upload it to the course folder of your course. You will find the course folder in the Icon Weitere Einstellungen More settings section at the top right of the course.

Open course folder

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


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

Open course settings

Select the first entry Settings . This opens the Course settings dialogue.


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

Select CSS file

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

Selected CSS file

Save your changes and close the dialogue.

Enable course layout (old user interface)

  To enable the course layout from a CSS file in the old user interface, proceed as follows ...

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 . 

Kurslayout auswählen

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 be automatically placed in your storage folder. You can also customise the CSS files directly under the path storage folder/layout/customise. The main.css file influences the representation 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 want to highlight all the 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 want 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; }

Layout 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

For example, if you wish to rename the button to start self-tests (class iqself) 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 button Start test for self-tests

You can hide the box containing 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;}

Layout example

Hide assessment information for self-tests

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

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

Layout example

Hide information on the course home page

For example, to hide information on the institution and semester as well as 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;}

Layout 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 an entire section on the home page
.root .resource-details {display: none;}