How to add a chapter description to a course overview page
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 was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Ever wish you could add a little description of the chapter in your Squarespace course? Well, I've cracked the code (literally!) and I'm excited to share it with you! In my latest video, I'll walk you through how to add custom excerpts to your chapter titles using a little bit of custom CSS. As always, you’ll find the codes below, but this tutorial is a little tricky so you’ll want to watch the video to learn how to use them.
Squarespace Tutorial
Code Example
Here are the codes from this tutorial. Be sure to customize the values to match the style of your unique website!
// Hide lesson timestamp
.course-list__grid-course-item-lesson-meta time, .course-list__chapter-duration, .course-list__grid-chapter-item-chapter-meta{
display:none
}
// Give the chapter section a background
.course-list__grid .course-list__grid-chapter-item{
background:#e5f5f6;
border-radius:10px;
padding:20px
}
// Style the excerpt & add the text for the first chapter
.course-list__grid .course-list__grid-chapter-item-header{
border-bottom:none
}
.course-list__grid-chapter-item
.course-list__grid-chapter-item-chapter-name:after{
content:"\A Describe the first chapter with a sentence or two";
white-space:pre;
font-size:1rem;
font-weight:300!important;
line-height:1rem
}
// Change the text for the second chapter
.course-list__grid-chapter-item:nth-of-type(2) .course-list__grid-chapter-item-chapter-name:after{
content:"\A Describe the second chapter with a sentence or two"
}
// Change the text for the third chapter
.course-list__grid-chapter-item:nth-of-type(3) .course-list__grid-chapter-item-chapter-name:after{
content:"\A Describe the third chapter with a sentence or two"
}
