Use your own course layout
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.
Inhalt
- Activate course layout
- Layout adjustment examples
- Hide main navigation
- Add a course background image
- Coloured course elements in the menu
- Adjust status colours for course progress
- Rename the "Start test" button for self-tests
- Hide "Attempts" box next to the "Start test" button for self-tests
- Hide assessment information for self-tests
- Hide information on the course home page
Activate course layout
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. |
|
Step 2: Embed CSS file
To activate the course layout from this CSS file, proceed as follows:
In the course view, open the |
|
| 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. |  |
| 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. |  |
| Save your changes and close the dialogue. |
More settings menu at the top right of the course.
Layout adjustment examples
- Hide main navigation
- Add a course background image
- Coloured course elements in the menu
- Adjust status colours for course progress
- Rename the "Start test" button for self-tests
- Hide "Attempts" box next to the "Start test" button for self-tests
- Hide assessment information for self-tests
- Hide information on the course home page
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.
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.
.nav-container,
.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.
color: #008079;
}
a:hover, a:focus, a:active,
.btn:hover, .btn:focus, .btn:active {
color: #004A46;
}
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.
display: none;
}
.mobile .nav-container {
display: block;
}
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.
background: url(background.jpg) no-repeat 0 0;
}
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:
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:
background: darkblue;
color: #fff;
}
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-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-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:after {content: "Mission starten";}
Use the iqtest class for a course element test:
.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:
Hide assessment information for self-tests
Use the following code to hide all assessment information during self-tests (iqself class):
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
Hide metadata
Other ways to customise information displayed on the home page:
Hide description in the detailed view
Hide course owners
Hide entire section on the home page