In this lesson, you’ll learn how to change the way your course looks with custom CSS. Code can not break your site, it can always be removed, and it’s not nearly as complicated as most people think!

I’m a college dropout who taught myself how to do this and I know you can do it, too. If you are brand new to code, you can start with my free guide to learn some basics. If you’re ready to dive in - keep reading! 🙌

How to add CSS to a course

If you only have one course on your site, I would recommend adding your code to your main CSS panel. You’ll find that at the bottom of your website menu. It’s the first option under the website tools section.

If you plan to have more than one course, or you just aren’t sure yet, you can install your code on an individual course or lesson. This video will show you how!

Custom Code Snippets for Courses

Here are a few premade snippets you can copy & paste into your own site to get started:

// Remove the footer button
<style>
.course-item__footer 
.course-item__next-lesson-button {
display: none
} 
</style>

// Center the footer button
<style> 
.course-item__footer-content {
justify-content: space-evenly; 
}
</style>
// hide the sidebar thumbnails
<style> 
.course-item__side-nav-thumbnail{
display:none!important;
}
</style>
// Remove the entire footer 
<style> 
.course-item__footer {
display: none
} 
</style>
// Hide the sidebar video icon
<style> 
.course-item__video-player-icon-container{
display:none
}
</style>