By default, the LearnDash progress bar only displays a colored bar to indicate a student’s progress in the course. There is no text-based example of what percentage they have completed.
Sweet lookin’ bar, man! How’d you do that? With this →
I’ve previously covered how to show “X out of Y steps completed” beneath the progress bar, but if you are trying to display a percentage instead, this article is for you.
The LearnDash progress bar does an OK job at visually representing a student’s progress, but there are ways to improve it. If you have 50 or more steps in your course, the progress bar itself might not be the best indicator.
Here’s how I did it.
" data-medium-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar-300x67.png" data-large-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar.png" decoding="async" loading="lazy" > Like the stripes? 😍 Here’s how I did it.
In this tutorial, I’m going to show you how to use a little CSS to display “X out of Y steps completed” below (or above) your LearnDash progress bar.
If you’re using LearnDash for your LMS, you probably know that there are buttons that perform all kinds of different functions. From navigation and payment to quiz actions, completing tasks & downloading certificates. Buttons galore!
By default, not every LearnDash button looks the same. When I built Design Upgrade for LearnDash, I went through every line of CSS to find every LearnDash button style, and I’ve compiled them all for you right here, in one convenient place.
If you’re looking to change any LearnDash button style, chances are you’ll find it here.
You’ve decided to use LearnDash for your LMS (great choice 👌). And you realized that the default courses archive page looks pretty terrible. But thankfully, you’ve discovered the LearnDash Course Grid add-on. And now you want to take it to the next level.
This post will cover many of the various ways you can customize the LearnDash course grid. There are around 20 different parameters you can use to make your course grid just right, along with various ways to improve your grid’s design. Follow along as I walk you through each one, along with code samples.
Powered by WordPress & Theme by Anders Norén