Style Customizer
The LearnDash Style Customizer allows site administrators to adjust the appearance of LearnDash courses, lessons, topics, quizzes, and shared interface elements, without writing any code.
The Style Customizer is available in the WordPress Customizer, where changes can be previewed live before being published.
Accessing the Style Customizer
- Log in to the WordPress dashboard
- Navigate to Appearance > Customize
- Select LearnDash Styles
The Customizer displays a live preview of the site alongside styling controls specific to LearnDash content.
Note: With the introduction of the Modern Appearance, some Style Customizer options may not apply as expected. Improvements and refinements are planned for future updates.
How Styling Works in LearnDash
LearnDash styles can be configured at two levels:
- Global styles, which apply to all LearnDash content
- Page-specific styles, which apply only to a specific content type (Courses, Lessons, Topics, or Quizzes)
Start by selecting the LearnDash page type to customize from the Customizer panel.
Using the Style Customizer
Most style controls work consistently across all LearnDash page types.
To update a style:
- Click Select Color (or adjust the available control)
- Choose the desired value
- Click Publish at the top of the Customizer to save your changes
Global Styles
Global Styles apply to all LearnDash content unless overridden by page-specific settings.
Available Global Style options include:
- Complete Status Background Color
- Complete Status Text Color
- In Progress Status Background Color
- In Progress Status Text Color
- Course Expand/Collapse Button Border Radius
- Content Header Background Color
- Content Header Text Color
- Next Button Background Color
- Next Button Text Color
- Previous Button Background Color
- Previous Button Text Color
After selecting your preferred values, click Publish to apply the changes.
Course Page Styles
Course-specific styles apply only to course pages and override Global Styles when set.
Available options include:
- Progress Bar Filled Background Color
- Progress Bar Text Color
- Complete Status Background Color
- Complete Status Text Color
- In Progress Status Background Color
- In Progress Status Text Color
- Expand/Collapse Button Background Color
- Expand/Collapse Button Text Color
- Expand/Collapse Link Text Color
- Lesson Complete Checkbox Color
- Lesson In Progress Circle Color
- Quiz Complete Icon Color
- Quiz Incomplete Icon Color
If available, the Course Expand/Collapse Button Border Radius can also be adjusted using the arrow controls.
Click Publish to save your changes.
Lesson Page Styles
Lesson Page styles behave the same way as Course Page styles and override Global Styles when set.
Available options include:
- Quiz Complete Icon Color
- Quiz Incomplete Icon Color
- Content Action Button Border Radius
- Complete Status Background Color
- Complete Status Text Color
- In Progress Status Background Color
- In Progress Status Text Color
- Content Header Background Color
- Content Header Text Color
- Next Button Background Color
- Next Button Text Color
- Previous Button Background Color
- Previous Button Text Color
Click Publish to apply the selected styles.
Topic Page Styles
Topic Pages share the same styling options and behavior as Lesson Pages.
Available options include:
- Quiz Complete Icon Color
- Quiz Incomplete Icon Color
- Content Action Button Border Radius
- Complete Status Background Color
- Complete Status Text Color
- In Progress Status Background Color
- In Progress Status Text Color
- Next Button Background Color
- Next Button Text Color
- Previous Button Background Color
- Previous Button Text Color
Make any adjustments and click Publish to save.
Quiz Page Styles
Quiz Page styles control elements specific to quizzes.
Available options include:
- Breadcrumbs Link Text Color
- Start Quiz Button Background Color
- Start Quiz Button Text Color
Click Publish to apply the changes.
Focus Mode Navigation Panel Styles
The Focus Mode navigation panel can also be styled independently.
Available options include:
- Header Background Color
- Header Text Color
- Arrow Icon Color
- Lesson Content Preview Text Color
- Current Lesson Text Color
Once satisfied, click Publish to save the updates.