Tag: CSS Page 1 of 3

LearnDash 4.15 Design Features & Design Upgrade Plugin Compatibility

Update, June 21, 2024: We released version 2.22 of Design Upgrade Pro, and version 2.22.1 3 days later. Version 2.22.1 fixes the issues with LearnDash 4.15’s new styles. If you’re using LearnDash 4.15 or higher, please update our plugin to 2.22.1 and all of your design issues should be fixed.

Design Upgrade Pro’s styles will now override all of LearnDash’s Customizer styles.

Hi LearnDash Friends,

If you’re reading this, you’ve heard about LearnDash 4.15 and the new “LearnDash Styles” design options they added to the Customizer. You found out about them at the same time I did.

If you didn’t know, I’m the owner of the popular Design Upgrade for LearnDash plugin (~20,000 active users). I’ve heard from some customers via email, and I’m being told there are many more asking questions in the LearnDash Facebook Group (unfortunately, I’m unable to respond in the group).

NOTE: I am a member of the Unofficial LearnDash Group here. Consider joining that if you’d like to ask questions about the plugin and these new LearnDash options. Tag me to be sure I see your questions.

How to Customize the LearnDash Sample Lesson Label

If you’re using LearnDash sample lessons in your course, a “sample lesson” label is added to the course content list, as well as in the sidebar of focus mode. Do you want to customize the way the sample lesson label looks?

This article will show you how to customize the label’s colors, borders, overall design, and more.

Hide/Disable “Mark for Review” in LearnDash Quizzes

When using the Review Box in a LearnDash quiz, there’s a “mark for review” option for students. A “Review Question” button is displayed below the review box, along with a small, colored dot that indicates the color when a student has marked something for review.

If you want to remove both the dot indicator and the “review question” button, you can do so with the following CSS:

How to Use Custom Fonts for H5P in WordPress

Are you looking to use a custom font for your H5P content in WordPress? The H5P website provides a short tutorial for making visual changes with CSS, but it leaves a lot to be desired. It also doesn’t provide any specific examples for using custom fonts.

This article will explain exactly how to bring custom fonts to H5P, and walk you through each step, providing code samples along the way.

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 👩‍💻.

LearnDash Focus Mode: Only Show the Current Lesson in Navigation

Someone recently asked if they could hide all the lessons in the LearnDash 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 LearnDash 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 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

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

Page 1 of 3