10 creative ways to customize your Squarespace course: lesson page & sidebar navigation
In this video, you’ll learn how to use 10 creative codes that will customize your Squarespace course, specifically the lesson page and the sidebar page.
Here are some chapters to help you skip to important parts of the video:
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
Here is the link to the original blog post for this tutorial with more info:
https://insidethesquare.co/squarespac...
Here are the codes from this video:
/* 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 Resources:
🎓 Free Video Training: how to create a course in Squarespace →
• How to create a course in Squarespace...
📚 Squarespace CSS Resources → https://insidethesquare.co/css
🍿 Free Squarespace tutorials → https://insidethesquare.co/tutorials
🙋♀️ Have a question? Check out my code troubleshooting tips → https://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. #squarespacetips #squarespacetutorial #squarespace #learnsquarespace #learncoding #squarespacetricks #squarespacetraining #squarespacecode
Watch video 10 creative ways to customize your Squarespace course: lesson page & sidebar navigation online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 13 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 448 once and liked it 27 people.