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 coloring 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.
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.