Course on Courses
Customizing your course design

Customizing with code

Complete & Continue Next Lesson Learn More

The ability to add page sections on the course overview page and the lesson page gives us a lot of flexibility with the design of our course.

We can even use fluid engine to make sure it looks great on mobile!

But what if there is something you want to change about a course that you just can’t do in the settings or site styles menu? For that, you’ll need custom CSS.

In this lesson, I’ll teach you how to add custom code to a course to make it uniquely yours.

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 Selectors for Courses

Here is a sneak peek of some of the selectors you can use to modify the look of your Squarespace course!

  • Progress bar: entire section

    • .course-list__progress-bar-container

    Progress bar: percentage complete fill

    • .course-list .course-list__progress-bar-container .course-list__progress-bar

    Progress bar: percentage complete text area

    • .course-list__progress-bar-text .course-list__progress-bar-percentage

    Progress bar: percentage complete text

    • .course-list .course-list__progress-bar-container .course-list__progress-bar-percentage::before

    Progress bar: progress text

    • .course-list .course-list__progress-bar-container .course-list__progress-bar-textere

  • Chapter Text

    • .course-item__chapter-title

    Lesson Title

    • .course-item__lesson-title

    Lesson Footer Section

    • .course-item__footer

  • Chapter Section (including lessons)

    • .course-list__list-chapter-item

    Chapter Section (Title, count & duration only)

    • .course-list .course-list__list-chapter-item-accordion-trigger

    Chapter Title Text

    • .course-list__list-chapter-item-chapter-name

    Chapter Meta Container

    • .course-list__list-chapter-item-chapter-meta

    Chapter Meta Text

    • .course-list__list-chapter-item-chapter-meta

    Total Lesson / Chapter Duration

    • .course-item__list-chapter-duration

    Chapter Title Arrow

    (arrow icon is rotated to indicate open or closed)

    • .course-list__list-chapter-item-accordion-icon

  • Sidebar Chapter Section (including lessons)

    • .course-item__side-nav-chapter-container

    Sidebar Chapter Section (title, count & duration only)

    • .course-item__side-nav-chapter-header

    Sidebar Chapter Title

    • .course-item__side-nav-chapter-title

    Sidebar Lesson Count

    • .course-item__side-nav-chapter-metadata

    Sidebar Chapter Duration

    • .course-item__side-nav-chapter-duration

    Sidebar Lesson Section

    • .course-item__side-nav-chapter-lessons

    Sidebar Lesson Thumbnail

    • .course-item__side-nav-thumbnail

Custom Code Snippets for Courses

I have SO many codes to share that I don’t know where to start!
I‘ll be adding to this list often, so be sure to bookmark this course so you have access to the latest.

  • To remove the button, add this to a code block in a page section on the final lesson page.

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

    To remove the entire footer area, add this to a code block in a page section on the final lesson page.

    • <style> .course-item__footer {display: none} </style>

    • .course-item__footer-content {
      justify-content: space-evenly;
      }