Tutorials (pg - Page 3 of 7)

Are your lessons jumping around in the LearnDash course builder? Do your section headings not appear in the correct place? Does the order of your lessons in the course builder not match what you’re seeing on the frontend of your site?

This issue has been reported by quite a few LearnDash users since the launch of the course builder in LearnDash 3.0. It happens with some courses and not with others; some times and not during others; with lessons, topics and could possibly happen with both.

Here’s the best solution we can offer to fix the random placement of lessons & topics in the LearnDash course builder.

Remove Scrollbar When LearnDash Focus Mode Sidebar is Collapsed

By Dave Warfel

On January 17, 2021

In Tutorials

In LearnDash, when you collapse the the Focus Mode sidebar navigation, you might still see the vertical scrollbar. This is partly because of the CSS that LearnDash uses for this section, but also partly the responsibility of the browser you’re using, and the settings you have set for your browser.

Regardless, there’s a way to always hide that scrollbar in the LearnDash Focus Mode sidebar when it is collapsed. Here’s the simple CSS to make that happen.

Avatar & Name in a Pill in the LearnDash Focus Mode Header

By Dave Warfel

On December 10, 2020

In Tutorials

Phew! That title is a mouthful, huh? Here’s a quick image that illustrates what we’re talking about:

Example of a pill design in the LearnDash Focus Mode header

We’re just applying some custom CSS to place the student’s name & avatar in a contained area with a background color (we’re calling it a pill). We’ll discuss the CSS needed to create this affect, and go over a few variations so you can customize it to your liking.

LearnDash + Divi – Issues & Solutions

By Dave Warfel

On November 8, 2020

In Tutorials

If you’re using Divi along with LearnDash, you might be running into some issues. The most common issue is that the LearnDash Focus Mode width you set in your LearnDash settings is not being respected. Content is appearing on the page with a very small width, as opposed to taking up the full screen or full width of the content area.

This article will explain all the issues we’ve found with Divi & LearnDash, and provide solutions for fixing them.

Course Grid in 1 column? Grid CSS not loading? Here’s the fix.

By Dave Warfel

On October 19, 2020

In Tutorials

Is your LearnDash course grid CSS not loading? Perhaps your courses are only being displayed in one column, instead of 3 or 4 columns. This is a common issue when using the course grid with Elementor, Divi & other page builders.

Let’s fix this problem and make sure your course grid is displaying exactly the number of columns you told it to (using the col="X" parameter).

How to Change the “Leave a Comment” Title in Focus Mode

By Dave Warfel

On October 15, 2020

In Tutorials

Focus Mode comment title custom text example — LearnDash Focus Mode comment title

If you’ve enabled comments in Focus Mode, the default title that appears before the comment box reads, “Leave a Comment.” This works fine for traditional blogs but it doesn’t always make sense for a LearnDash lesson or topic.

This article will show you how to use custom text instead of “Leave a Comment.”

LearnDash Course Grid Returns No Results? Show a Custom Message.

By Dave Warfel

On October 12, 2020

In Tutorials

When using LearnDash course grid parameters to customize the output of the grid, some users or instances might return no results. By default, when the course grid doesn’t show any courses, the area is left blank. But what if you want to display a custom message in place of your grid when no courses are available?

This article will show you how to do that.

Move the LearnDash Focus Mode Sidebar to the Right

By Dave Warfel

On July 28, 2020

In Tutorials

We’ve previously showed you how to adjust the focus mode header height, and apply a background color to the focus mode header. In this article, we’ll continue customizing LearnDash’s Focus Mode by moving the navigation panel (aka: Focus Mode sidebar) from the left side of the screen to the right.

I’ll walk you through all the CSS and explain what each piece of code is doing, and then provide the full CSS to copy/paste at the bottom.

Use a Custom Background Color for your LearnDash Focus Mode Header

By Dave Warfel

On July 23, 2020

In Tutorials

There are a few questions I routinely get about the LearnDash Focus Mode header. I’ve previously explained how to use a custom height for the focus mode header, as well as move the focus mode sidebar to the right. In this article, we’ll take a look at applying your own background color to the entire LearnDash Focus Mode header area.

How to Change the LearnDash Focus Mode Header Height

By Dave Warfel

On June 11, 2020

In Tutorials

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.