Submit a ticket My Tickets
Login  Sign up
Open navigation

How to Customize the Appearance of your Course Player

In this article, we are going to show you how you can customize the appearance of your course player. See how you can give the course your own feel.

1. Navigate to Courses → select a course → Course Player tab

By default, the Coloured Minimal skin will be selected. You have then the option to select a skin from the first three options: Colored minimal, Classic, Minimal. Kindly know that if you choose the Minimal skins, the section descriptions will not be displayed in the Course Content section on the Course Layout page, and the learning activities descriptions will not be displayed in the course player.

Note: If you have a long learning activity description and you want to remove the ellipsis (...) at the end, insert the following code in your Custom Code editor → <style> (css) for built-in pages (i.e social, profile, work pad, my account):

.lrn-path-cont-type {
white-space: normal!important;

Regarding the skins, there are two more specifically for Single Learning Activity courses: the Minimal and the Dark one.

After that, you have a lot of options to customize your course player.

1. Show the course name in the course player or hide it.

2. Show a "Back to course page" button to provide an easy way for learners to find their way back to the course description page.

3. Show students' progress with a progress bar, which represents the percentage of the learning units that are considered completed. 

4. Show all the course learners tab next to the "Path" tab. This tab presents all the enrolled learners as links and motivates them to connect.

5. Show the course discussion tab, if you want your learners to be able to discuss your course topics. Check this article for more information on the Discussion settings.

6. Display the whole titles of sections even if they need multiple lines (wrapping). If you check this box, the entire titles of your sections will appear no matter how large they are. Otherwise, titles will appear in one line with an ellipsis (...) at the end.

7. Display the whole titles of learning activities even if they need multiple lines (wrapping), similarly with the section titles.

8. Display the estimated reading time of the ebooks (this setting can be enabled in the Ebook).

9. When the course loads, show all the course sections “opened and not just the current one. If you select this setting, all the sections will be opened and show the learning units they contain. Otherwise, only the selected section will be opened, and the other sections will be collapsed.

10. Add numbers automatically in front of the sections' names

To preview all these changes, click Save and then Preview Course Player.

Note: You can hide the progress bar in the Course Player, by using the following CSS snippet, which should be added in the Custom code editor of your school, and paste in the <style> (css) for built-in pages (i.e social, profile, work pad, my account) slot. Don't forget to click on Update.

/ .slug-path-player .-default-course-player-progress-wrapper{

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.