Menu

Applying CSS to the Thinkific Course Player

Sometimes you might like to make specific customizations to the look of your Course Player, like changing a button color! This article will cover how to add custom code to Thinkific that applies to the Course Player specifically.


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

Custom CSS: Site wide

Site Footer Code

Editing the Site Footer Code is available on all sites and plan levels. 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:

  1. From your Admin Dashboard, select Settings on the left
  2. Select the Code & analytics tab
  3. Site footer code will appear at the top


Custom CSS: Site wide

What plan is this available on?

This is available on our Pro plans and up and must be manually enabled by a member of our Support team. 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:

  1. From your Admin Dashboard, select Settings on the left
  2. Select the Code & analytics tab
  3. 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.


What if I need additional coding assistance?

Although we don't provide support for code customizations, we have some wonderful freelance web developers on our Thinkific Experts page who you can reach out to if you need! Many course creators also use upwork.com or fiverr.com for hiring developers.



More Developer Resources

Custom Themes (for Developers)




Did you find it helpful? Yes No

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