{"id":6793,"date":"2024-06-18T19:17:29","date_gmt":"2024-06-18T23:17:29","guid":{"rendered":"https:\/\/learndash.com\/support\/docs\/core\/style-customizer\/"},"modified":"2026-02-02T16:51:31","modified_gmt":"2026-02-02T21:51:31","password":"","slug":"style-customizer","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/core\/getting-started-with-learndash\/style-customizer\/","title":{"rendered":"Style Customizer"},"content":{"rendered":"\n

The LearnDash Style Customizer<\/strong> allows site administrators to adjust the appearance of LearnDash courses, lessons, topics, quizzes, and shared interface elements, without writing any code<\/strong>.<\/p>\n\n\n\n

The Style Customizer is available in the WordPress Customizer, where changes can be previewed live before being published.<\/p>\n\n\n\n

Accessing the Style Customizer<\/h3>\n\n\n\n
    \n
  1. Log in to the WordPress dashboard<\/li>\n\n\n\n
  2. Navigate to Appearance > Customize<\/strong><\/li>\n\n\n\n
  3. Select LearnDash Styles<\/strong><\/li>\n<\/ol>\n\n\n\n

    The Customizer displays a live preview of the site alongside styling controls specific to LearnDash content.<\/p>\n\n\n\n

    Note:<\/strong> With the introduction of the Modern Appearance<\/strong>, some Style Customizer options may not apply as expected. Improvements and refinements are planned for future updates.<\/p>\n\n\n\n

    How Styling Works in LearnDash<\/h2>\n\n\n\n

    LearnDash styles can be configured at two levels:<\/p>\n\n\n\n

      \n
    • Global styles<\/strong>, which apply to all LearnDash content<\/li>\n\n\n\n
    • Page-specific styles<\/strong>, which apply only to a specific content type (Courses, Lessons, Topics, or Quizzes)<\/li>\n<\/ul>\n\n\n\n

      Start by selecting the LearnDash page type to customize from the Customizer panel.<\/p>\n\n\n\n

      Using the Style Customizer<\/h2>\n\n\n\n

      Most style controls work consistently across all LearnDash page types.<\/p>\n\n\n\n

      To update a style:<\/p>\n\n\n\n

        \n
      1. Click Select Color<\/strong> (or adjust the available control)<\/li>\n\n\n\n
      2. Choose the desired value<\/li>\n\n\n\n
      3. Click Publish<\/strong> at the top of the Customizer to save your changes<\/li>\n<\/ol>\n\n\n\n

        Global Styles<\/h2>\n\n\n\n

        Global Styles apply to all LearnDash content unless overridden by page-specific settings.<\/p>\n\n\n\n

        Available Global Style options include:<\/p>\n\n\n\n

          \n
        • Complete Status Background Color<\/li>\n\n\n\n
        • Complete Status Text Color<\/li>\n\n\n\n
        • In Progress Status Background Color<\/li>\n\n\n\n
        • In Progress Status Text Color<\/li>\n\n\n\n
        • Course Expand\/Collapse Button Border Radius<\/li>\n\n\n\n
        • Content Header Background Color<\/li>\n\n\n\n
        • Content Header Text Color<\/li>\n\n\n\n
        • Next Button Background Color<\/li>\n\n\n\n
        • Next Button Text Color<\/li>\n\n\n\n
        • Previous Button Background Color<\/li>\n\n\n\n
        • Previous Button Text Color<\/li>\n<\/ul>\n\n\n\n

          After selecting your preferred values, click Publish<\/strong> to apply the changes.<\/p>\n\n\n\n

          Course Page Styles<\/h2>\n\n\n\n

          Course-specific styles apply only to course pages and override Global Styles when set.<\/p>\n\n\n\n

          Available options include:<\/p>\n\n\n\n

            \n
          • Progress Bar Filled Background Color<\/li>\n\n\n\n
          • Progress Bar Text Color<\/li>\n\n\n\n
          • Complete Status Background Color<\/li>\n\n\n\n
          • Complete Status Text Color<\/li>\n\n\n\n
          • In Progress Status Background Color<\/li>\n\n\n\n
          • In Progress Status Text Color<\/li>\n\n\n\n
          • Expand\/Collapse Button Background Color<\/li>\n\n\n\n
          • Expand\/Collapse Button Text Color<\/li>\n\n\n\n
          • Expand\/Collapse Link Text Color<\/li>\n\n\n\n
          • Lesson Complete Checkbox Color<\/li>\n\n\n\n
          • Lesson In Progress Circle Color<\/li>\n\n\n\n
          • Quiz Complete Icon Color<\/li>\n\n\n\n
          • Quiz Incomplete Icon Color<\/li>\n<\/ul>\n\n\n\n

            If available, the Course Expand\/Collapse Button Border Radius<\/strong> can also be adjusted using the arrow controls.<\/p>\n\n\n\n

            Click Publish<\/strong> to save your changes.<\/p>\n\n\n\n

            Lesson Page Styles<\/h2>\n\n\n\n

            Lesson Page styles behave the same way as Course Page styles and override Global Styles when set.<\/p>\n\n\n\n

            Available options include:<\/p>\n\n\n\n

              \n
            • Quiz Complete Icon Color<\/li>\n\n\n\n
            • Quiz Incomplete Icon Color<\/li>\n\n\n\n
            • Content Action Button Border Radius<\/li>\n\n\n\n
            • Complete Status Background Color<\/li>\n\n\n\n
            • Complete Status Text Color<\/li>\n\n\n\n
            • In Progress Status Background Color<\/li>\n\n\n\n
            • In Progress Status Text Color<\/li>\n\n\n\n
            • Content Header Background Color<\/li>\n\n\n\n
            • Content Header Text Color<\/li>\n\n\n\n
            • Next Button Background Color<\/li>\n\n\n\n
            • Next Button Text Color<\/li>\n\n\n\n
            • Previous Button Background Color<\/li>\n\n\n\n
            • Previous Button Text Color<\/li>\n<\/ul>\n\n\n\n

              Click Publish<\/strong> to apply the selected styles.<\/p>\n\n\n\n

              Topic Page Styles<\/h2>\n\n\n\n

              Topic Pages share the same styling options and behavior as Lesson Pages.<\/p>\n\n\n\n

              Available options include:<\/p>\n\n\n\n

                \n
              • Quiz Complete Icon Color<\/li>\n\n\n\n
              • Quiz Incomplete Icon Color<\/li>\n\n\n\n
              • Content Action Button Border Radius<\/li>\n\n\n\n
              • Complete Status Background Color<\/li>\n\n\n\n
              • Complete Status Text Color<\/li>\n\n\n\n
              • In Progress Status Background Color<\/li>\n\n\n\n
              • In Progress Status Text Color<\/li>\n\n\n\n
              • Next Button Background Color<\/li>\n\n\n\n
              • Next Button Text Color<\/li>\n\n\n\n
              • Previous Button Background Color<\/li>\n\n\n\n
              • Previous Button Text Color<\/li>\n<\/ul>\n\n\n\n

                Make any adjustments and click Publish<\/strong> to save.<\/p>\n\n\n\n

                Quiz Page Styles<\/h2>\n\n\n\n

                Quiz Page styles control elements specific to quizzes.<\/p>\n\n\n\n

                Available options include:<\/p>\n\n\n\n

                  \n
                • Breadcrumbs Link Text Color<\/li>\n\n\n\n
                • Start Quiz Button Background Color<\/li>\n\n\n\n
                • Start Quiz Button Text Color<\/li>\n<\/ul>\n\n\n\n

                  Click Publish<\/strong> to apply the changes.<\/p>\n\n\n\n

                  Focus Mode Navigation Panel Styles<\/h2>\n\n\n\n

                  The Focus Mode navigation panel can also be styled independently.<\/p>\n\n\n\n

                  Available options include:<\/p>\n\n\n\n

                    \n
                  • Header Background Color<\/li>\n\n\n\n
                  • Header Text Color<\/li>\n\n\n\n
                  • Arrow Icon Color<\/li>\n\n\n\n
                  • Lesson Content Preview Text Color<\/li>\n\n\n\n
                  • Current Lesson Text Color<\/li>\n<\/ul>\n\n\n\n

                    Once satisfied, click Publish<\/strong> to save the updates.<\/p>\n","protected":false},"excerpt":{"rendered":"

                    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 The Customizer displays a live preview of the…<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[179],"doc_tag":[],"knowledge_base":[154],"class_list":["post-6793","docs","type-docs","status-publish","hentry","doc_category-getting-started-with-learndash","knowledge_base-core"],"year_month":"2026-04","word_count":607,"total_views":"3937","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Stephanie Liy","author_link":"https:\/\/learndash.com\/support\/author\/stephaniei\/"},"doc_category_info":[{"term_name":"Getting Started with LearnDash","term_url":"https:\/\/learndash.com\/support\/kb\/core\/getting-started-with-learndash\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":179,"label":"Getting Started with LearnDash"}],"knowledge_base":[{"value":154,"label":"LearnDash Core"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[{"term_name":"LearnDash Core","term_url":"https:\/\/learndash.com\/support\/kb\/core\/","term_slug":"core"}],"knowledge_base_slug":["core"],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/6793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=6793"}],"version-history":[{"count":9,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/6793\/revisions"}],"predecessor-version":[{"id":11203,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/6793\/revisions\/11203"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=6793"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=6793"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=6793"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=6793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}