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 theMore settings section at the top right of the course.
To enable the course layout from this CSS file, proceed as follows:
OpenMore settings menu at the top right of the course.
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.
The selected file name automatically appears 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 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:
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 :
Adjust the status colours to indicate course progress
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:
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:
Hide assessment information for self-tests
Use the following code to hide all assessment information when conducting self-tests (class iqself):
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:
Other ways to customise the displayed information on the home page: