If you'd like to customize the look and feel for each course based on branding, instructor or subject, you can modify the appearance of individual courses using custom code!
Looking to customize the Course Player without getting into code? Check out: Individual Course Player Appearance Customizations
ATTENTION: This article is no longer up to date, and should be automatically redirecting you to a more current article in our Developer-specific documentation. If for some reason you are not redirected, please use this link to see the most recent version of this article.
Custom CSS: Site wide
This field is used to add CSS to your site, which allows you to change the styling of your course. You can also hide certain elements by making them invisible. Note that this applies to styling only, 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.
If you are on the 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!
Customizing the Course Player
Before applying customizations to individual courses, we recommend reviewing Applying CSS to the Thinkific Course Player. This will give you an overview and examples of how to use Custom CSS: Site wide.
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
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-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.
Example: Adding a Course ID to Your Code
Now that you've seen an example that applies to all courses, you can further customize your code to include the course ID. For example, if you wanted to apply the Sarabun font to course chapters only in this specific course, you can modify the code example above to read:
.course-player__chapter-item__title .course-id-532886 {
Font-family: Sarabun;
}
Explore the course in your browser console to learn more about the specific elements you can target. Feel free to get creative with how you style your courses!
Custom Code Support
We don't provide support for code customizations, however if you are not currently working with a developer, we have some wonderful freelance web developers on our Thinkific Experts page who you can reach out to if you need! There's also the Thinkific Store on Fiverr, for smaller, quicker jobs.