The Thinkific Course Player is a separate application from the rest of your Thinkific site. It’s where your lessons and course content are delivered to the student and is used to track their progress through the course. Since it is a separate application, you won’t see the code for the player in your Site Theme code.
We don’t expose this code for customization, but we do have two places you can apply custom code to the Course Player:
Site Footer Code
Editing the Site Footer Code is only available on paid plans (Basic or higher). This field allows you to include code that will run in the footer on every page of your site, including the Course Player. Typically we see this used for Javascript placed between two <script> tags, but you can include CSS or even HTML here!
One important thing to note is that the Course Player is a Single Page Application. This means that the individual lessons are loaded and rendered with Javascript without refreshing the page. The Site Footer Code only runs only on page load, so that makes it tricky to customize your Course Player using Javascript in the Site Footer Code field.
You can access your Site Footer Code as follows and see here for more details:
- From your Admin Dashboard, select Settings on the left
- Select the Code & analytics tab
- Site footer code will appear at the top
Custom CSS: Site wide
AVAILABLE ON THE START/PRO PLAN OR HIGHER
If you are on the Start/Pro plan or higher, we can manually turn on this feature for you. The reason this field is disabled by default is to reduce the likelihood of breaking the player with incorrect code, as the Course Player is such a vital part of the student experience. If you are interested in enabling this feature, please send us an email!
Where can I access the Custom CSS: Site wide field?
Once you have sent us an email to have this enabled, it will be accessible as follows:
- From your Admin Dashboard, select Settings on the left
- Select the Code & analytics tab
- Select Custom CSS: Site wide on the left
What can this field be used for? This field can only be used for CSS and you don’t need to include <style> tags here. CSS lets us change the styling. You can also hide certain elements by making them invisible, but we can’t take them out of the application altogether. You cannot use this field to change structure/behavior of the Course Player, like where a link goes or what happens after a student answers a quiz question for example.
What is an example of code that can be included? You can import a font or a custom stylesheet here by using @import syntax. For example, if I wanted to import the Google font Sarabun, I would put the following at the top of that field:
@import url('https://fonts.googleapis.com/css?family=Sarabun');From there, I can apply it to various elements of the Course Player using standard CSS.
If I wanted to target the Chapter Titles, for example, I would include this code:
.course-player__chapter-item__title {
Font-family: Sarabun;
}You can use this field to apply any kind of CSS, but you just might need to get very specific in your declarations or even use the !important tag.
Are these changes applied Site wide?
Any changes added to this field will be applied to the Course Player for all courses on your site. It is only applied to your Course Player CSS and will not affect your site theme.
Applying Code to Individual Courses
All Thinkific courses have a class in their body element that contains their unique course ID. If you'd like to have CSS code that only targets a specific course, you can simply apply the class in the body element that contains the course ID. This will follow the format of: course-id-######
The hashes in the example above represent the Course ID. While in the course, you can find this ID in your browser console, for example:
or in the URL when editing the course in the Course Builder, for example:
Example: Adding a Custom Font to the Course Player of one course
You can import a font or a custom stylesheet in the Custom CSS: Site wide field by using @import syntax. For example, if you wanted to import the Google font Sarabun, you would include the following:
@import url('https://fonts.googleapis.com/css?family=Sarabun');From there, you can apply it to various elements of the Course Player using standard CSS.
If you wanted to target the Chapter Titles, for example, you would include this code:
.course-id-532886 .course-player__chapter-item__title{
Font-family: Sarabun;
}By including the class selector .course-id-532886 this css rule only applies to this course!