10 creative codes for your Squarespace course

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.

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.

/* 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
}