Every school's lesson page is the same Teachable page underneath. This one looks different because of a single head code snippet. This section takes that snippet apart, starting with how to find your way around the page you're restyling.

A map of the lesson page

Your browser's developer tools (right-click, Inspect) show how any page is built. On a Teachable lesson, these are the parts worth knowing:

Part	How to find it
The whole lesson page	body.revamped_lecture_player
Top bar	header, with .lecture-left and .lecture-nav inside
Sidebar	#courseSidebar
One lesson in the sidebar	.section-item
The lesson you're on	.section-item.next-lecture
The main column	.course-mainbar
The lesson title	#lecture_heading

One oddity: Teachable marks the current lesson with the class next-lecture, not something like "current". Once you know, it's easy to use.

Start every rule with the page class

The snippet runs on every page of the school, so every rule begins with the lesson page's own class. That keeps it on lesson pages and nowhere else:

.revamped_lecture_player .course-sidebar {
  background: var(--ph-surface) !important;
  border-right: 1px solid var(--ph-edge) !important;
}

.revamped_lecture_player #lecture_heading {
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: clamp(32px, 4vw, 46px) !important;
}

This is the one place in the course where !important is used freely. Teachable's lesson page styles use it themselves, so without it most of these rules would be ignored. Scoping every rule to the page class is what keeps that safe.

Pixels, not rem

Teachable's newer pages set the base text size to 10px, so on those pages 1.6rem means 16px. The lesson page doesn't: its base is 16px, so the same 1.6rem comes out as nearly 26px. The lesson snippet uses pixels throughout, so sizes mean the same thing everywhere.

What's in the snippet

1. The colour system from the Dark Mode section, so lessons match the rest of the site.
2. Restyling for the top bar, sidebar, title and buttons.
3. Styles for lesson content: notes, tables, code examples and these boxes.
4. A small script that adds the top-bar switches and swaps the icons. The next lessons cover each part.