LDX Design

Tag: CSS Page 2 of 3

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

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

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.

Use a Custom Background Color for your LearnDash Focus Mode Header

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

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.

LearnDash Focus Mode Edge-to-Edge Content for Page Builders

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.

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.

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.

Update: 8 Feb 2021 (version 1.7 of course grid plugin)
Short descriptions now support most HTML tags.

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

How to Remove Bullets from Elementor Icon Lists in LearnDash Focus Mode

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.

Elementor icon list with LearnDash bullet points

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.

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.

Page 2 of 3