I’ve had a few users ask if they can change the height of the header in LearnDash’s Focus Mode. The answer is yes, and this tutorial will provide the exact CSS you need to use.
Tag: CSS Page 1 of 2
In our Design Upgrade Pro plugin, we offer the ability to set focus mode content to run from edge-to-edge. The left navigation bar will still be present, but the rest of the content area will span from the right edge of the navigation, right up to the right edge of the user’s browser.
This is great for those creating content with page builders. You can use your own spacing via the page builder elements/widgets, and build more creative layouts.
Our plugin only provides the option to do this globally, for every single piece of content in focus mode. This includes all lessons, topics & quizzes. But what if you want to only apply it to topics? Or only to quizzes? This tutorial will show you how.
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.
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.
- how to add a short description
- what you might want to use it for
- some tricks on how to customize its formatting
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
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.
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.
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.
If you’re interested in using a dark mode with LearnDash, I’ll provide you with the custom CSS below.
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.
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.
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.