LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Tag: CSS

How to Hide the Default LearnDash Lesson List on Course Pages

I’ve seen this question come up many times now, so I figured I’d post the solution online for all to see.

Are you using the LearnDash course grid to display your lessons in grid format? If you’re using the [ld_lesson_list] shortcode (or block) on your course page, and want to hide the default lesson list, here’s the solution.

Read More

Formatting Short Descriptions in the LearnDash Course Grid

For a lot of LearnDash users, the course grid add-on is an essential component to designing the learning experience. You can filter & sort the course grid in a myriad of ways. This article will focus on one of the key components of the course grid—the short description.

We’ll explore:

Some creative ideas include:

  • display course authors
  • indicate the total time it takes to complete a course
  • display the amount of credit (or CEUs) a student might receive for completing the course
  • how to add bold, italics & insert new lines

Read More

How to Programatically Number LearnDash Sections, Lessons & Topics with CSS

Justin from the LearnDash Facebook group asked if there was a way to automatically add numbers before each lesson using the BuddyBoss theme + platform. I was pretty confident the answer was yes, so I rolled up my sleeves and got to work.

Not only can we do this for BuddyBoss, but I’ll provide you with the CSS to do this for all themes using the LearnDash 3.0 template, as well as those using the Legacy template. I’ll even throw in some code to auto-number lessons & topics in the Uncanny LearnDash Toolkit Dashboard.

This is the perfect solution for those who want to display lesson/topic numbers in navigation & course lists, but not include the number in the actual lesson or topic title. This way, the numbers don’t show up at the top of each individual page. They only appear when viewing lists & navigational elements 👍.

It also works great for those who switch lessons & topics around or use them in multiple courses with shared course steps.

Read More

Build Custom Styles for LearnDash Quiz Questions

Have you ever wanted your answers displayed inline (next to each other) instead of stacked? How about using an actual blank line for fill-in-the-blank questions?

In this tutorial, I’ll explain how you can use custom CSS to design your quiz questions in various ways.

Read More

LearnDash focus mode dark mode example

Create a Dark Mode for LearnDash Focus Mode

A few people have asked me if I could create a “dark mode” for LearnDash’s focus mode. The answer is yes, but it does come with a few caveats. Overall though, I was able to replicate the same colors in YouTube’s dark mode and apply them to the LearnDash Focus Mode experience.

LearnDash focus mode dark mode example

If you’re interested in using a dark mode with LearnDash, I’ll provide you with the custom CSS below.

Read More

Customize the “Return to Course” Link in the LearnDash Navigation Widget

When you use the LearnDash course navigation widget, and navigate to a lesson, topic or quiz page, you’ll see a “Return to [Course]” link appear at the bottom. No surprise, this brings you back to the course page.

But what if you wanted to customize the “Return to [Course]” link?

  • 🚫 Hide the “Return to” part and just display the course title?
  • 👈 Add a back arrow before the course title?
  • 👆 Move the entire link to the top of the navigation?
  • Or just completely remove the link all together?!

You’ve come to the right place!

Read More

How to Show Percentage (%) Complete in the LearnDash Progress Bar

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.

LearnDash progress bar with percentage complete

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.

Read More

Show “X out of Y steps completed” under the LearnDash Progress Bar

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.

LearnDash progress bar with steps shown

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.

Read More

Customize LearnDash Button Styles with CSS (Class/ID Names)

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.

Read More

How to Use & Customize the LearnDash Course Grid

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 all 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.

Read More

Powered by WordPress & Theme by Anders Norén