How to customize the footer of a lesson in a Squarespace course
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 in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
In this quick tutorial, learn how to customize the lesson footer in your Squarespace course with CSS! You'll learn how to change the color and position of the footer button and alter the footer's background color to match your site's design.
Why use custom code? The footer background and layout can not be edited directly in Squarespace. The color of the button can, but any changes you make to this button will affect all the buttons assigned to that same style across your entire site. CSS makes it possible for us to make changes that only affect the lesson page.
Video tutorial
Here are some time stamps in case you want to jump ahead:
00:44 How to change the button style
01:18 How to add custom CSS to Squarespace
01:27 Custom CSS for the footer button colors
02:09 Footer button hover effects for a Squarespace lesson
02:40 Center the footer button in a Squarespace lesson
03:10 Change the lesson footer background
03:47 Next steps & related content
Code Example
/* change the button colors */
.course-item__footer .course-item__next-lesson-button {
background: #F6EDCE!important;
border-color:#EDD17D!important
}
/* change the button colors on a hover */
.course-item__footer .course-item__next-lesson-button:hover {
background: #fff!important;
color:#333!important
}
/* change the footer background */
.course-item__footer-background{
background:#EDD17D
}
/* center the footer button */
.course-item__footer-content {
justify-content: center;
}
/* align the footer button to the left */
.course-item__footer-content {
justify-content: flex-start;
}
