Скачать или смотреть 10 creative ways to customize your Squarespace course: lesson page & sidebar navigation

Ready to take your Squarespace course design to the next level? In this comprehensive tutorial, we'll explore ten powerful CSS customizations that will transform how your course looks and functions. From improving navigation clarity to enhancing the progress tracking experience, these code snippets will help you create a more polished and professional learning environment for your students. Whether you're looking to adjust button text, modify sidebar appearance, or create a more intuitive course interface, I'll walk you through each customization step by step.

✨ What You’ll Learn:
How to enhance course navigation with clear back-to-course indicators and improved sidebar toggles
Ways to customize lesson completion buttons, progress tracking, and thumbnail appearances
Advanced styling techniques for chapter headers, progress bars, and course layout elements to create a more professional learning experience

🔗 Related content Links:
Original Blog Post: https://insidethesquare.co/squarespac...
Basic CSS for Squarespace - save 10% with promo code YOUTUBE: https://insidethesquare.co/learn
Subscribe to my channel for new Squarespace videos every week:    / @insidethesquare  
Squarespace CSS Code Collection: https://insidethesquare.co/css

⏱️ Important Timestamps:
00:00 Introduction and Overview
00:19 Customizing the Lesson Page
01:08 Modifying Buttons and Text
02:28 Adjusting Sidebar Navigation
04:29 Customizing Thumbnails and Timestamps
06:38 Enhancing Progress Indicators
07:35 Conclusion and Additional Resources

🖥 Tutorial Code:

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

- -
Need help with customizing your site? Here are my current support options: https://www.insidethesquare.co/code-help
- -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #SquarespaceCustomization #WebDesignTips #CSSforBeginners #squarespacetutorial #SquarespaceCSS