Alerts

Alerts are short messages LearnDash displays after you take an action, or when it needs further action from you. 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.

Types of alerts

LearnDash uses three alert types, depending on the situation.

  • General Alert: covers everything that isn’t a warning or a success, such as an alert on a dripped lesson before it’s available.
  • Warning: signals an error, or something that needs your attention.
  • Success: confirms a successful action, such as completing the “download certificate” box.
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

Three settings apply to every alert type.

  • Reduce Alert Size: shrinks all alerts.
  • Remove Alert Icons: removes the icon from every alert type, leaving only the alert text.
  • Border Width: sets the alert border width, in pixels (px). Leave it empty to use the global Bold Border Width from the General Design panel.

All alerts will inherit the Global Border Radius set on the General Design panel

Color options

Each label tells you which parts of the alert share a color. Text/Icon/Button, for example, applies one color to the alert’s text, icon, and button together.

General alert

  • General Alert: Text/Icon/Button: sets the alert’s text, icon, and button color. Leave it empty to follow the theme’s neutral hue.
  • General Alert: Background: sets the alert’s background color. Leave it empty to follow the theme’s neutral hue.
  • General Alert: Border: sets the alert’s border color. Leave it empty to follow the theme’s neutral hue.

Warning

  • Warning: Border/Icon: sets the alert’s border and icon color. Leave it empty to follow the theme’s warning hue.
  • Warning: Text/Button: sets the alert’s text and button color. Leave it empty to follow the theme’s neutral hue.
  • Warning: Background: sets the alert’s background color. Leave it empty to follow the theme’s warning hue.

Success

  • Success: Text/Icon/Button: sets the alert’s text, icon, and button color. Leave it empty to follow the theme’s success hue.
  • Success: Background: sets the alert’s background color. Leave it empty to follow the theme’s success hue.
  • Success: Border: sets the alert’s border color. Leave it empty to follow the theme’s success hue.

All alerts will inherit the Global Border Radius set on the General Design panel

Testing alert designs

You can publish your alert changes right away, or test them first. Here’s the fastest way to trigger all three alert types:

  1. Go to LearnDash LMS > Settings.
  2. Create a closed course only you, as an admin, can access.
  3. Add two lessons to the course.
  4. For Lesson 1, enable Assignment Uploads, set grading to Manually Grade, and enable Allow File Deletion.
  5. For Lesson 2, set the Lesson Release Schedule to a future date.
  6. From the All Courses screen, click View on your test course.
  7. Click Customize in the admin bar to open the Customizer 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.