10 creative ways to customize your Squarespace course lesson page & sidebar navigation

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About This Tutorial

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

Squarespace courses are a cool feature that let’s you present structured content in the form of lessons that are grouped into chapters. This course feature allows for progress tracking and is designed to feature videos for each less.

While it has some great design options, I’ve had to rely on my custom code collection to make this feature perfect for some of my clients, and my own courses!

In this tutorial, I’m sharing my top 10 code tricks that you can use to customize the lesson page and the sidebar / side navigation feature that is exclusive to this type of Squarespace content.

The codes I use are below, but make sure you take the time to watch the video so you can understand exactly how to use these codes and how to make them unique for your own Squarespace website style.

Squarespace Tutorial

Code Example

Here are the codes used in this tutorial.

You’ll find more selectors and style plugins like this inside the Squarespace CSS cheat shet, available at insidethesquare.co/css

Be sure to edit the values so they match the style of your own website!

/* Lesson: add descriptive text before course name */
.course-item__course-title a:before{
  content: "← Back to the ";
}

/* Lesson: hide complete and continue button at the top */
.course-item .course-item__header .course-item__next-lesson-button {
display:none
}

/* Lesson: complete & continue text */
.course-item__next-lesson-button * {
  font-size:0!important
}
.course-item__next-lesson-button:after{
  font-size:1rem!important;
  content: "mark as complete"
}

/* Sidebar: make the toggle bigger */
.course-item .course-item__header .course-item__next-lesson-button {display:none}
.course-item .course-item__side-nav-header .course-item__side-nav-toggle-button-desktop{
  height:200%;
  left:-2rem!important;
  background:orange
}
.course-item .course-item__side-nav-header .course-item__side-nav-toggle-button-desktop svg{
  width: 35px;
  top:50px
}

/* Sidebar: remove video play button */
.course-item__video-player-icon-container{
display:none
}

/* Sidebar: remove timestamps */
.course-item__side-nav-lesson-metadata, .course-item__side-nav-chapter-duration{
display:none
}

/* Sidebar: customize chapter header or remove it */
.course-item__side-nav-chapter-header{
  background:#999;
  color:#fff;
  text-align:center;
}

/* Sidebar: change thumbnail size and shape */
.course-item__side-nav-thumbnail-container {
  border-radius:50%!important;
  height:50px!important;
  width:50px!important
}

/* Sidebar: Change progress bar to completed status */
.course-item .course-item__side-nav-header .course-item__side-nav-progress-bar-container, .course-item__side-nav-progress-bar{
  border-radius:0!important;
justify-content:center
}
.course-item__progress-bar-text{
  background:none!important
}
.course-item__progress-bar-text:first-of-type::after{
  content: " completed"
}
.course-item__side-nav-progress-bar-label{
  display:none
}

---

Related Content

📚 Squarespace CSS Resources → insidethesquare.co/css

🍿 Free Squarespace tutorials → insidethesquare.co/tutorials

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help