LearnDash Design & Tutorials

LearnDash Design & Tutorials

Tag: CSS Page 1 of 3

How to Customize the LearnDash Notifications Subscription Page

If you’re using the LearnDash Notifications add-on, you may have noticed the message at the bottom of all notification emails that reads, “Don’t want to receive this email anymore? Click here to manage your notification emails subscription.” Click here links to a dynamically-generated page on your site.

The title on this page reads “LearnDash Notifications Subscription” and the URL is /learndash-notifications-subscription/. Neither of these is ideal. This article will explain how to customize them.

There’s also some CSS you can write to improve the design, and possibly bring it more inline with your overall site layout & design. Buckle up… there’s a lot of code involved in this one 👩‍💻.

Focus Mode: Only Show the Current Lesson in Navigation

Someone recently asked if they could hide all the lessons in the focus mode navigation, and show only the current lesson. I never thought anyone would want this type of set up, but apparently, some find it useful.

I was able to write some CSS to achieve it, but there is one small caveat.

LearnDash Focus Mode: Sticky Header on Mobile

This will be a quick article with the custom CSS to make the LearnDash focus mode header fixed on mobile. This means the header will be fixed to the top of the screen as the user scrolls.

LearnDash uses a fixed header for focus mode on larger screens, but they disable it on mobile. Here’s how to get it back. We’ll also address tablets.

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.

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

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.

Page 1 of 3

Powered by WordPress & Theme by Anders Norén