Course Pages
GENERAL ELEMENT COMPONENTS & CSS SNIPPETS
Select a Squarespace Element to Examine CSS Selectors:
| Squarespace Element | Description |
|---|---|
| Course Overview Page | Refers to elements that appear on the course overview page |
| Course Individual Lesson Page | Refers to elements that appear on individual course lesson pages. |
CSS Code Snippets for Customizing Course Pages
Change font size of metadata in course chapter overview section (the # of lessons text, the chapter duration text and the lesson duration text)
//Start: Font size of course overview meta data
.course-list__list-chapter-item-accordion-trigger .course-list__list-chapter-item-chapter-meta {
font-size: 1em;
}
.course-list__list-course-item-info-container .course-list__list-course-item-lesson-meta {
font-size: 1em;
}
//End: Font size of course overview meta dataChange font size of progress bar text
//Start: Change font size of progress bar text on course pages
.course-list .course-list__progress-bar-container {
font-size: 1em;
}
//End: Change font size of progress bar text on course pagesChange width and height of chapter toggle button on course overview page
//Start: Change width and height of chapter toggle button on course overview page
.course-list__list-chapter-item-accordion-icon {
width: 30px;
height: 30px;
}
//End: Change width and height of chapter toggle button on course overview pageChange color of the side navigation menu toggle button on desktop & mobile
//Start: Side navigation toggle button on course pages
.course-item .course-item__side-nav-header .course-item__side-nav-toggle-button-desktop svg {
fill: #ffffff;
}
.course-item__side-nav-toggle-button-mobile svg {
fill: #ffffff;
}
//End: Side navigation toggle button on course pagesShow the progress indicator on the lesson pages in the side navigation flyout menu
//Start: Show the progress indicator on the lesson pages in the side navigation flyout menu
.course-item.mobile-layout .course-item__side-nav-header {
display: initial;
}
//End: Show the progress indicator on the lesson pages in the side navigation flyout menu