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. The “download certificate” box is also considered a success alert.
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.
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
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.
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.
All alerts will inherit the Global Border Radius set on the General Design panel
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.
Navigate to LearnDash LMS > Settings
In the Admin User Settings, disable “Bypass Course limits”
Create a closed course that only you, as an admin, have access to
Add 2 lessons to the course
For Lesson 1…
Enable “Assignment Uploads”
Set them to “Manually Grade”
Enable “Allow File Deletion”
For Lesson 2, set the “Lesson Release Schedule” to a specific date in the future
From the All Courses screen in the admin, click the “View” link for your test course
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.