LDX Design

Tag: CSS Page 1 of 3

LearnDash 4.15 Design Features & Design Upgrade Plugin Compatibility

Sticky post

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.

I’m still in the early stages of testing the new LearnDash design features, and evaluating how I’m going to handle them alongside using my plugin. But I’d like to answer as many questions as I can for now. I’ll update this page when I can provide you with more.

Will updating to LearnDash 4.15 affect my Design Upgrade styles?

Some of them, yes. Others, no.

The options in LD 4.15 are very limited compared to what we offer. They do automatically apply some CSS, even if you don’t use any of their options, and some of that CSS will change the look of your site.

Which parts of my site will be affected?

I can’t give you an exact list, but in general, if there’s an option in the “LearnDash Styles” Customizer panel for something, you can expect there might be an issue with that particular element. So things like buttons, progress labels, course content headings, etc.

Features that Design Upgrade offers that LearnDash Styles does not, those will likely still work as they always have.

Can I use both the Design Upgrade plugin and some of the new LearnDash Styles?

Yes. However, see above for some potential conflicts.

In any instance where Design Upgrade & LearnDash Styles offer the same option, I’m pretty sure that LearnDash Styles will take precedence. It certainly looks like their styles are written more aggressively, and will load after our styles, making theirs win.

If only Design Upgrade offers the option, you should be able to use it just fine.

What about button & link hover styles?

The new LearnDash Styles do not provide any hover style options. And since their styles take precedence over ours, unfortunately, their button & link colors will be used for both normal and hover states. This renders our hover styles unusable, at the moment (I’m working on a fix).

Should I stay on LearnDash 4.14?

Generally, it’s best practice to keep your plugins up-to-date. However, if you want to continue to use the Design Upgrade plugin as you always have, you’ll need to stay on 4.14 for now.

The good news is that there are no security issues fixed in 4.15, and no other new features were added. The only reason you would NEED TO update to 4.15 is if one of the 6 small bug fixes they made apply to you. To me, it looks like they won’t impact most users. (see LD release notes)

So there shouldn’t be any security issues to remain on LearnDash 4.14 for now.

When can I expect an update to the Design Upgrade plugin to address all of this?

From the day I created the plugin almost 6 years ago, up to and including today, I’ve always been incredibly detailed and intentional with how I make updates. I don’t just respond quickly to “just fix things,” but I consider the long-term implications.

There’s a lot of CSS to comb through with this change, and it will take some time (weeks, not months). Rest assured, careful consideration will be made in all decisions.

I’ll email all customers as soon as an update is available, explaining the decisions made.

What does this mean for the future of the Design Upgrade plugin?

I’m not sure yet.

I hope to have a conversation with LearnDash in the near future about their plans for the LearnDash Styles. If they plan to continue adding design options to it, and those options overlap with ours, there will come a point where it won’t make sense to continue managing our plugin.

But we’re a long way away from that at this point.

As long as we still have a decent amount of users using our plugin, and getting value from it, I’ll do my best to continue maintaining it.

If you have any questions I didn’t address above, feel free to leave them in the comments.

LearnDash > Settings > General > Colors

Upon upgrading to LearnDash 4.15, it looks like LearnDash changes the default colors under LearnDash LMS > Settings > General > Design & Content Settings.

The new default colors used the dark blue & green mentioned below, and changed the Notifications & Warnings color to a different shade of yellow (from #ffd200 to #f2e600).

LearnDash 4.15 default colors
New, default colors in LearnDash 4.15

What’s interesting is that if you click the “Default” button, you can actually restore the previous color defaults in versions 4.14 and below, which were:

  • Accent Color: #00a2e8
  • Progress Color: #019e7c
  • Notifications, Warnings, etc.: #ffd200

LearnDash Customizer Style Defaults

When you update to version 4.15, LearnDash applies some default colors to various elements of your LMS.

They use the following 4 colors:

  • #002bc9 – dark blue
  • #01af36 – green
  • #333333 – dark grey
  • #ffffff – white

In general…

Dark blue is used for:

  • In Progress status background
  • Content header backgrounds
  • Button backgrounds
  • Breadcrumb links
  • Focus Mode navigation element background color

White is used for:

  • In Progress status text
  • Content header text
  • Button text
  • Focus Mode navigation element text color

Green is used for:

  • Complete status background
  • Progress bars

Dark grey is used for:

  • Incomplete quiz icons

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