Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

How to Customize your Course Player

The Course Player is a place where students feel like being in a classroom, watching all the e-learning material unfold right before their eyes. 


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


Navigate to Courses → select a course → Course Player tab

Course Player skin

You can choose the Course player's skin and basically select the feel and look of the course player.


By default, the Coloured Minimal skin will be selected. You can select a skin from the first three options: Colored minimal, Classic, and Minimal


If you choose the Minimal skins, the course 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.


Regarding the Course Player skins, there are two Minimal & Dark skins for Single Learning Activity courses. If you enable them this course will be set up to present only the first activity of the first section.

Customize your Course Player 

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

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

3. 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.

4. 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.

5. Display the whole titles of course 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.

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

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

8. 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.

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

10. Start section numbering from 00 instead of 01. This is depicted on the Course Player, Contents tab, and any contents section.

Course Player "back" button

You can allow students to navigate away from the course player, with a back button. 

You can choose to: 

  • Not have a button at all
  • Navigate to the Course layout page
  • Navigate to another school page
  • Navigate to a Specific URL

Course video Auto-Progress

Choose whether the next learning activity will automatically be loaded when the video learning activity ends.

Navigation Buttons

You can rename the Navigation buttons, hide them, or show the next/previous navigation buttons at the bottom of the course player. Additionally, you can disable the sidebar navigation.

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


If you wish to apply the Course Player settings to all of your created courses, check the relevant settings under Apply Course Player settings to all other courses.

Customize the Course player using CSS

Remove the ellipsis at the end of the learning activity description

If you have a learning activity with a long description and you wish 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;
}

Change the background color of the learning activities section under Path 

You can add the following code in your Custom Code editor → <style> (CSS) for built-in pages (i.e., social, profile, work pad, my account) (make sure to add the hex color of your choice and replace #ffc0cb), to change the background color of the learning activities in the Path section:

.slug-path-player .lrn-path-conts{
background-color:#ffc0cb!important;
}

Change the background color of the Zoom learning activities

You can add the following code in your Custom Code editor → <style> (css) for built-in pages (i.e. social, profile, work pad, my account) (make sure to add the hex color of your choice and replace #ffc0cb) to change the background color in all Zoom learning activities:

.slug-zoomplayer #bodyWrapper{
background-color:#ffc0cb;
}

Remove Learners List Autofill in the Discuss tab

According to your Community settings you can let users start discussions within a course via the Discuss Tab of the Course Player.  Users can type @ and get a user names list to tag and contact other users. 

If you want to disable the user name list from appearing you can add the following code in your Custom Code editor → <style> (css) for built-in pages (i.e. social, profile, work pad, my account)

.mentions-autocomplete-list{display:none!important;}

Hide the progress bar in the Course player

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{
display:none;
}

Did you find it helpful? Yes No

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