Skip to main content
Course Player Style Tweaks
Updated over 11 months ago

Here are some code snippets that you can add to your Site Footer Code settings to change the behavior and style of the course player.

Targeting Specific Courses

If you wish to target specific courses you will need to get the course id and replace the "1234567" in the below snips. You also need to repeat the snip for each course that you wish to target

To get the "course id" - open the course settings and inspect the browser address bar:

The "id" number will be: 2396670

So for example, if I wanted to hide the Progress Bar, Lesson Search, Chapters menu and branding text for this course, here is what my Site Footer Code snippet would look like:

Hiding the Progress Bar:

<style>
// For all courses
[class*="_course-progress__actions"] {
display: none;
}

// Specific course - replace 1234567 with your course id
.take.course-id-1234567 [class*="_course-progress__actions"] {
display: none;
}
</style>

Hiding the Lesson Search:

<style>
// For all courses
.course-player__user-search { display:none;}

// Specific course - replace 1234567 with your course id
.take.course-id-1234567 .course-player__user-search { display:none;}
</style>

Hiding the Chapters Menu:

<style>
// For all courses
.course-player__chapters-menu {
display:none;
}

// Specific course - replace 1234567 with your course id
.take.course-id-1234567 .course-player__chapters-menu {
display:none;
}
</style>

Hiding the Branding text:

<style>
// For all courses
footer.course-player__branding-badge{ display:none;}

// Specific course - replace 1234567 with your course id
.take.course-id-1234567 footer.course-player__branding-badge{ display:none;}
</style>

Did this answer your question?