InsideTheSquare.co

View Original

How to customize the footer of a lesson in a Squarespace course

See this content in the original post

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.

See this content in the original post

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

See this content in the original post

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

See this content in the original post