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"
}

Related Content

insidethesquare

Squarespace Circle Leader & Creator of InsideTheSquare.co

https://insidethesquare.co
Previous
Previous

How to customize blog post width on tablet screens

Next
Next

How to create a numbered accordion block in Squarespace