Alerts

Alerts are used in a few areas throughout the LearnDash interface. They can be a little difficult to preview because action is usually needed in order to trigger them to appear. That can be hard to do when you’re logged in as an admin. But we’ll discuss a few ways to test their design, and all of the available options that Design Upgrade Pro provides.

3 Types of Alerts

There are 3 different types of alerts that LearnDash uses, depending on the context & meaning of the alert message.

  • Warning Alerts: These alerts indicate an error occurred, or there is a warning that you should pay attention to
  • Success Alerts: These alerts indicate that a successful action was taken
  • General Alerts: These alerts are used in all other situations that don’t call for a warning or success alert. One example is an alert on a dripped lesson if someone tries to access it before it’s available.
Example of LearnDash warning alert
A LearnDash warning alert styled by Design Upgrade Pro
Example of LearnDash success alert
A LearnDash success alert styled by Design Upgrade Pro
Example of a LearnDash general alert
A general LearnDash alert styled by Design Upgrade Pro

Global Options

There are 3 design options that will apply to all alerts, regardless of their type.

  • Reduce Alert Size: Enabling this option will reduce the size of all alerts
Example of compact alerts with Design Upgrade Pro
Example of smaller alerts with Design Upgrade Pro
  • Remove Alert Icons: Enabling this option will remove the icons from all alert types. Only the alert text will be displayed.
  • Border Width: The width of all alert borders, in pixels. Leave blank for the default 2px. Enter 0 to remove the border.
Design Upgrade Pro color options for alerts

Color Options

LearnDash styles the alerts a little differently, so the styles might look a little confusing at first. But the words tell you exactly which part of the alert will get the color you choose.

  • Text: The text inside the alert
  • Icon: The icon inside the alert
  • Button: The background color of the button inside the alert, if one exists
  • Background: The background color of the entire alert
  • Border: The border color of the alert

In some cases, the same color will be used for several parts of the alert (ex: Text/Icon/Button). This means that the text inside the alert, the alert icon and the alert button background color (if a button exists) will share the same color. Button text will always be white.

Testing Alert Designs

You can change all your alert options and publish them right away, if you’d like. But some people might want to test them before making them live. Here’s the quickest way we’ve found to test all three types of alerts.

  1. Navigate to LearnDash LMS > Settings
  2. In the Admin User Settings, disable “Bypass Course limits”
  3. Create a closed course that only you, as an admin, have access to
  4. Add 2 lessons to the course
  5. For Lesson 1…
    1. Enable “Assignment Uploads”
    2. Set them to “Manually Grade”
    3. Enable “Allow File Deletion”
  6. For Lesson 2, set the “Lesson Release Schedule” to a specific date in the future
  7. From the All Courses screen in the admin, click the “View” link for your test course
  8. Now click the “Customize” link in the admin bar at the top of the screen. This will launch the Customizer with you on the course page.
  • When you upload an assignment to Lesson 1, you’ll see a warning alert that says, “You have an assignment awaiting approval.” You need to upload an assignment on the frontend of the site (not in the Customizer).
  • When you delete that assignment, you’ll see a success alert that says, “Assignment successfully deleted.”
  • When you try to view Lesson 2, you’ll see a general alert that contains the date the lesson will become available, along with a “Back to Course” button. To see the Lesson 2 page, click the calendar icon next to the lesson title in the sidebar navigation.

When you’re finished testing, remember to re-adjust your “Bypass Course limits” setting if you need to, and delete your test lessons & course.