LearnDash styles you can adjust

Design Upgrade for LearnDash Pro adds more than 110 design options in the WordPress Customizer. These options cover LearnDash course and learner interfaces, so you can adjust their appearance to suit your site without writing custom CSS for every change.

Course content, progress, and profiles

For course content lists, adjust backgrounds, text colors, hover effects, line separators, and count visibility. Progress bar controls include color, border radius, height, stripes, and an animation when the bar loads. Button backgrounds and text colors are customizable, too.

Options for the [ld_profile] area include avatar shape, a custom edit-profile link, and controls for showing profile and quiz information. You can also display or hide selected course and profile functions, disable expand and collapse links, and show content expanded by default.

Focus Mode, grids, and add-ons

Focus Mode has more than 20 design options, including seven for comments. Login and registration popups have more than 10 options. The Course Navigation Widget has 15 options, and the Course Grid Add-On has 20.

• Alerts include nine custom colors and additional styling options.
• The Achievements Add-On has 10 customization options.
• Tin Canny Reporting has 12 options for front-end reports.
• Tooltips can have custom background and text colors.
• Uncanny Groups receives button, border-radius, and other front-end styling improvements.

Templates and theme fit

The add-on detects whether the LearnDash 3.0 or Legacy template is active and applies styles for that template. Design coverage includes Focus Mode navigation and sidebar, course sections, mobile menus, registration pages, profiles, grids, pagination, assignments, comments, and the User Status widget. Print styles and right-to-left language support are also included.

Theme fit can vary when a theme customizes LearnDash markup. The extension's styles are designed to allow child-theme CSS and WordPress Additional CSS to take precedence. Toolkit style upgrades apply only with the LearnDash 3.0 active template, not Legacy.

Using the Customizer

Install and activate Design Upgrade for LearnDash Pro, then open the WordPress Customizer. Review the controls for the course and learner areas you want to change, preview the result, and publish your settings when the layout fits your website.