LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Remove Scrollbar When Focus Mode Sidebar is Collapsed

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

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

 

LearnDash avatar & name in a pill

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.

The Best LearnDash Hosting: What to Look For + Top Recommendations

Sticky post

LearnDash hosting is one of the most common topics I’ve seen pop up from new users just getting started with the plugin. Choosing a great LearnDash host from the beginning will save you headaches down the road, and allow you to scale & grow your learning platform.

This article will walk you through the basics of hosting, explain how LearnDash hosting is different, help you make sense of all the terminology when you’re shopping for a plan, and of course, give you our list of recommended hosts for LearnDash.

My qualifications: I’ve been fully immersed in the LearnDash community for the past 5 years, built 3 free & 2 premium plugins exclusively for LearnDash, have helped numerous companies get their LearnDash sites up-and-running, and have been listening to literally thousands of user questions & feedback in the LearnDash Facebook group. I run my own LearnDash-powered site over at ldx.training.

LearnDash + Divi – Issues & Solutions

If you’re using Divi along with LearnDash, you might be running into some issues. The most common issue is that the 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.

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

Focus Mode comment title custom text example

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.

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.

Design Upgrade Compatibility with the Elementor for LearnDash Add-On

On July 30, 2020, LearnDash released a new integration that adds support for the Elementor page builder. Compared with the Design Upgrade Pro plugin, there is definitely some overlap in the features that they each provide. But there are also a ton of differences.

This article will discuss how the pro version of Design Upgrade for LearnDash works with the new Elementor for LearnDash integration. We’ll cover the pros & cons of each, as well as how they work together if you decide to use them both.

Enter WisdmLabs Ultimate Elearning Giveaway

WisdmLabs is awarding 3 lucky winners over $1,000 worth of LearnDash plugins (and their eLumine theme) in their Ultimate Elearning Giveaway. Enter for a chance to win this awesome package, which also includes our very own Design Upgrade Pro plugin.

Enter the Giveaway →

Move the LearnDash Focus Mode Sidebar to the Right

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.

Page 4 of 9

Powered by WordPress & Theme by Anders Norén