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.
Step 2: Embed CSS file
To enable the course layout from this CSS file, proceed as follows:
Open theMore settings menu at the top right of the course.
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.
The selected file name will automatically appear in the selection box, which is now highlighted.
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.
Open your course in the course view. Click on the expand icon in the upper menu and select the entry Details and settings.
In the detailed view, select the Change properties entry from the menu on the right.
Open the tab 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:
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:
Adjust the status colours to indicate course progress
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:
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:
Hide assessment information for self-tests
Use the following code to hide all assessment information during self-tests (class iqself):
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:
Other ways to customise the displayed information on the home page: