---
title: "Style Customizer"
source: "https://docs.nexcess.com/software/learndash/style-customizer/"
description: "The LearnDash Style Customizer allows site administrators to adjust the appearance of LearnDash courses, lessons, topics, quizzes, and shared interface elements…"
vertical: "Software"
area: "LearnDash"
date: "2024-06-18"
last_modified: "2024-06-18"
---

# 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

1. Log in to the WordPress dashboard
2. Navigate to **Appearance > Customize**
3. 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:

1. Click **Select Color** (or adjust the available control)
2. Choose the desired value
3. 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.