LearnDash is a powerful learning management system (LMS) for managing your online courses, but let’s be honest – the default styles are outdated. In order to provide your students with an exceptional learning experience, you need a professional design.
Enter Design Upgrade for LearnDash
Design Upgrade for LearnDash completely redesigns every aspect of LearnDash so that it closely resembles your existing WordPress theme. No settings or custom code required. Just activate & enjoy!
(video coming soon…)
I literally went through every line of CSS that LearnDash uses and gave it all a fresh coat of paint. Here are the highlights:
- All fonts have been reset to use your theme’s default font family, size & color
- All PNG icons have been replaced with comparable SVG versions
- All complete/incomplete icons for lesson/topic/quiz lists have been moved to the right for better consistency
- Spacing around & between elements has been adjusted to provide greater consistency throughout
- All LearnDash widgets now have more consistent spacing & sizing, including improvements to Course Info & Course Navigation
- Styling for the
[ld_profile]shortcode has been completely revamped
- Improved design of the statistics modal window (for quizzes), including row highlights on hover
- Larger pager navigation buttons to improve usability
Who is this for?
Brand new LearnDash users: There is absolutely no reason not to try it out. At the very least, it will give your site a more consistent design. If you plan to customize LearnDash further, you can still do so using a child theme or Additional CSS in the Customizer.
Seasoned LearnDash veterans: If you have not made any customizations to your LearnDash design, but would like to improve it, give us a shot. You might want to try it out on a test site first, but you can deactivate it with one click and return to your previous design.
You might also want to give your students a heads up that you’re updating the design. But we feel confident that they’ll like it 🙂
LearnDash developers: If you’re a developer who builds LearnDash sites for your clients, this could save you hours (maybe even days) of development time. LearnDash’s markup & CSS is a beast to customize. This will give you a much easier baseline to work with.
We designed the plugin to be just specific enough to override LearnDash’s default styles, but not so specific that you’ll need to use a ton of selectors to override our specifity. All CSS in custom themes, child themes and Additional CSS will take precedence over our styles.
Need even more custom styles?
We’ve got a premium version of this plugin in the works, but it’s not quite ready for primetime. It will include over 30 LearnDash components you can change with a few clicks in the WordPress Customizer.
If you’d like to know when it becomes available, shoot us an email at firstname.lastname@example.org and we’ll let you know as soon as it’s ready. In the meantime, if there’s something specific you’re trying to do, email us anyway. We can probably send you a snippet of CSS to do the trick.
- Astra: The Astra theme already provides updated styles for LearnDash, and unfortunately, they aren’t compatible with ours. You can stick with the styles Astra provides, or email Astra support & ask them if there’s a way for you to disable their LearnDash CSS.
We are just finishing up customizing our very own LearnDash site that we’ll be launching soon, so we’re fully invested in the platform. As LearnDash adds new features, it is our goal to keep this plugin updated.
A few things currently planned for future release:
- Switch from SVG icons to font icons, which will more easily allow you to change their colors
- Add RTL support
We’d love to hear from you!
Does something look weird with your theme? Is there something we missed? Wouldn’t it be cool if…
We tested it on a handful of popular themes, but we couldn’t possibly cover them all. If you have any feedback, please let us know in the support forum.
- Paint brush icon made by Freepik, courtesy of flaticon.com. Licensed under CC3.0 BY.
- Gradient by colorful gradients
From within WordPress
- Visit “Plugins > Add New”
- Search for “Design Upgrade for LearnDash”
- Click the “Install” button
- Click the “Activate” button
- There are no settings to configure. An improved design will automatically be applied to all LearnDash elements on your site.
Course content design with the TwentySixteen theme
Course content expanded with the GeneratePress theme
Improved Profile & My Courses page
Course information widget, before & after the upgrade
Enjoy a cleaner quiz interface
The quiz statistics modal has an improved look
Course navigation widget, with subtle design improvements