View Categories

Style Customizer

What is the LearnDash Style Customizer? #

The LearnDash Style Customizer lets you customize your LearnDash courses, lessons, topics, quiz pages, and global style without needing code. To access it, go to WordPress Admin Dashboard > Appearance > Customize and select LearnDash Styles from the menu.

Style Customizer menu

 Here you’ll find the Style Customizer.

Style Customizer for LearnDash menu

Note: With the introduction of the Modern Appearance, some customizer options may not apply as expected, but we are actively working on improvements in future updates.

How to Style LearnDash with the Style Customizer #

You can style your LearnDash pages either globally or by specific LearnDash page types. Start by selecting the LearnDash page type you’d like to customize.

Style Customer LearnDash Styles

LearnDash Style Customizer Settings #

In the section below, you’ll find that, for the most part, the customizer settings function similarly for each page type. Select your color and click the Publish button at the top of the page to save your changes. A comprehensive list of settings options for each page type, along with any special instructions, is included.

Customizing Global Styles #

Click Select Color for the setting you want to change. Setting 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

You can edit the color of the selected setting:

Style Customizer Color Selector

Click Publish to apply the settings.

Customizing Course Pages #

Select the course page element you would like to customize. Settings options include:

  • Progress Bar Filled Background Color
  • Progress Bar Text Color
  • Complete 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 Complete Checkbox Color
  • Lesson In Progress Circle Color
  • Quiz Complete Icon Color
  • Quiz Incomplete Icon Color
  • Please Note: Changing the following settings will override the setting under “Global Styles” if set.
    • Complete Status Background Color
    • Complete Status Text Color
    • In Progress Status Background Color
    • Course Expand/Collapse Button Border Radius
    • Content Header Background Color
    • Content Header Text Color

Edit the color of the selected setting. If applicable, adjust the Course Expand/Collapse Button Border Radius by using the up or down arrows to increase or decrease the radius value.

Style Customizer Expand and Collapse Radius Button

When you are done, select Publish (at the top of the page) to save changes.

Customizing Lesson Pages #

  1. Select the lesson page element you would like to customize: Setting options include:
    • Quiz Complete Icon Color
    • Quiz Incomplete Icon Color
    • Content Action Button Border Radius
    • Please Note: Changing the settings will override the setting under “Global Styles” if set.
      • 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

Just like Course Pages, begin by adjusting the color of the selected setting. If applicable, modify the button radius using the up or down arrows to increase or decrease the value. Click Publish at the top of the page to save your changes.

Customizing Topic Pages #

Topics Pages are customized just like Lesson Pages. Select the topic page element you would like to customize. Setting options include: :

  • Quiz Complete Icon Color
  • Quiz Incomplete Icon Color
  • Content Action Button Border Radius
  • Please Note: Changing the settings will override the setting under “Global Styles” if set.
    • 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

Edit the color of the selected item. If applicable, adjust the button radius using the up or down arrows to modify the value. Click Publish at the top of the page to save your changes.

Customizing Quiz Pages #

  1. Select the quiz page element you would like to customize. Setting options include: :
  • Breadcrumbs Link Text Color
  • Start Quiz Button Background Color
  • Start Quiz Button Text Color

Edit the color of the selected item. Click Publish to apply the settings.

Customizing The Focus Mode Navigation Panel #

Select the quiz page element you would like to customize. Setting options include:

  • Header Background Color
  • Header Text Color
  • Arrow Icon Color
  • Lesson Content Preview Text Color
  • Current Lesson Text Color

Edit the color of the selected item. Click Publish to apply the settings.

Updated on March 25, 2025