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: Focus Mode
The following articles will explain how to customize LearnDash’s focus mode design & layout. Move the sidebar navigation to the right, adjust the header height, apply different colors and more.
Explore all LearnDash focus mode customizations below.
In our Design Upgrade Pro plugin, we offer the ability to set LearnDash 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.
Many of you who use LearnDash also use Elementor to build your lesson & topic pages. This article addresses a very specific design issue when using the Elementor Icon List widget.
In LearnDash Focus Mode, Elementor icon lists have bullet points next to them, and this is not the expected behavior. This is because LearnDash’s CSS overrides Elementor’s CSS for icon lists.
I’ll provide the CSS to remove the bullets that LearnDash adds and return your Elementor icon lists back to normal.
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.
When Focus Mode first came out in LearnDash 3.0, you could add your logo to the header of Focus Mode, but it didn’t link anywhere. It was just a static image.
Starting in LearnDash 3.1, the logo now automatically links back to your site’s homepage. Personally, I see this as an improvement, but… what if you want it to link somewhere else? Or remove the link entirely and go back to how it was prior to 3.1 (not recommended)?
I’ll walk you through the steps on how to change the URL of the LearnDash Focus Mode logo, as well as provide a few examples.
If you have really long course names, it can cause an issue when they are displayed in the LearnDash breadcrumbs, especially within Focus Mode. And since you can get back to the course page by clicking on the course title in the sidebar navigation, you might want to remove the course name from the breadcrumbs. This article will show you how to do that with CSS.
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.
How to Enable Comments for LearnDash
By Dave Warfel
On April 19, 2020
In Tutorials
With LearnDash, one of the easiest ways to encourage discussion amongst your students, as well as the instructor, is to use native WordPress comments. There are forum plugins and third-party live chat solutions, but using comments is a quick & simple way to allow for discussion to take place within your LearnDash courses.
There are a few steps to ensure comments are enabled for LearnDash. Let’s walk through each one.
Read More