Custom CSS
For advanced styling beyond what the visual theme editor offers, Slate includes a custom CSS editor. Write CSS that targets any element in the course player.
Opening the CSS editor
Section titled “Opening the CSS editor”Open the CSS editor from the Custom CSS section in the theme editor sidebar. It opens as a full-screen editor with syntax highlighting.
Editor features
Section titled “Editor features”The CSS editor includes:
- Syntax highlighting - CSS-aware colouring for properties, values, and selectors
- Line numbers - for easy reference
- Auto-save - changes save automatically as you type
- Your Classes panel - lists all custom CSS class names used across your course blocks, with copy buttons for easy reference
Available selectors
Section titled “Available selectors”Custom CSS can target any element in the course player. Common selectors include:
Player layout
Section titled “Player layout”#slate-player- main player container#player-header- top header area#course-title- course title text#progress-bar- progress bar container#progress-fill- progress bar fill#player-nav- navigation sidebar#player-content- main content area#player-footer- bottom navigation
Navigation
Section titled “Navigation”.nav-section-title- section titles in the sidebar.nav-lesson- lesson items.nav-lesson.active- the currently active lesson.nav-lesson.viewed- lessons the learner has completed
Content blocks
Section titled “Content blocks”.block-text,.block-image,.block-video,.block-audio- block types by name.block-accordion,.block-tabs- container blocks.block-knowledge-check- quiz blocks.block-table- table blocks.block-card,.flip-card,.carousel-card- card variants
Buttons
Section titled “Buttons”.button-primary- primary button style.button-secondary- secondary button style.button-outline- outline button style
Custom block classes
Section titled “Custom block classes”If you’ve added a custom CSS class name to a block in the editor, that class is available as a standard CSS selector. The “Your Classes” panel in the editor lists all custom classes used in the current course.
Adding a CSS class to a block
Section titled “Adding a CSS class to a block”To target a specific block with your custom CSS, give it a class name. Open the block’s three-dot menu and choose CSS class, then type a name. Each class becomes a chip as you press Space, Enter, or comma, and pasting a space-separated list adds several at once. Remove a class with the × on its chip, or press Backspace to delete the last one.
You can add more than one class to a block. Slate checks each name as you add it and won’t accept an invalid or reserved one, so a class you set here always reaches the player. Every class you use across the course appears in the Your Classes panel of the CSS editor, ready to copy into a selector.
CSS scope
Section titled “CSS scope”Custom CSS applies to the entire course, not individual lessons. All CSS is injected into the course player at runtime.
Limits
Section titled “Limits”Custom CSS supports up to 50,000 characters.