Customize Squarespace Courses With CSS
Further customize Squarespace Courses with these CSS selectors and copy & paste codes.
Original post:
https://ajmexperience.com/learn-posts...
For more Squarespace tips to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S THE CSS:
course overview page:
// course name color //
.course-list__course-name {color: #7cccbd;}
// course description color //
.course-list__course-description {color: #319aab;}
// chapter title color //
.course-list__list-chapter-item-chapter-name {color: #319aab !important;}
// chapter meta color //
.course-list__list-chapter-item-chapter-meta {color: #319aab;}
// lesson name color //
.course-list__list-course-item-link {color: #319aab;}
// lesson excerpt color //
.course-list__list-course-item-lesson-excerpt {color: #319aab !important;}
// lesson meta color //
.course-list__list-course-item-lesson-meta {color: #319aab !important;}
// change lesson background color //
.course-list__list-item {
background: #c8e0da !important;}
// round corners of chapter boxes //
.course-list__list-chapter-item {
border-radius: 10px !important;}
// border around entire chapter box //
.course-list__list-chapter-item {
border: solid 2px #7cccbd !important;}
// highlight a single lesson in a different color //
.course-list__list-chapter-item:nth-child(2)
.course-list__list-item:nth-child(1) {
background: #7cccbd !important;}
// highlight a single lesson with a border //
.course-list__list-chapter-item:nth-child(2)
.course-list__list-item:nth-child(1) {
border: solid 2px #7cccbd;}
// change the hover color of highlighted lesson //
.course-list__list-chapter-item:nth-child(2)
.course-list__list-item:nth-child(1):hover {
background: #fac827 !important;}
Within a lesson
// course title color //
.course-item__course-title {color: #7cccbd;}
// hide course title //
.course-item__course-title {display: none;}
OR
.course-item__course-title {color: transparent;}
// chapter title color //
.course-item__chapter-title {color: #7cccbd;}
// hide chapter title //
.course-item__chapter-title {display: none;}
// lesson title color //
.course-item__lesson-title {color: #7cccbd;}
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)