Achievements

NOTE
These options are for the official LearnDash Achievements add-on. You must have this plugin installed & activated to use these features. You also need to be running Design Upgrade Pro for LearnDash version 2.17 or higher.

In version 2.17, we added 11 new design options for achievements for you to customize. We’ll explain them below.

Popup Container

The “popup container” refers to the notification popup that appears in the top-right (top-left for RTL) corner of the screen when an achievement is earned. These styles apply to the entire popup.

• Popup Container: Vertical Position: By default, the popup will appear at the top of the screen. Choose Bottom to move it to the bottom.
• Popup Container: Border Width: By default, there is no border around the outside of the popup. Enter a number (in pixels) to add a border.
• Popup Container: Border Color: Choose a custom color to use for your border. You must use a Border Width of 1 or higher for the color to appear.
• Popup Container: Border Radius: By default, the border radius of the popup container is set to 2px. Enter a different value here (in pixels) to customize it.
• Popup Container: Shadow: By default, the popup container does not have a shadow (None). You can add a shadow by choosing either a Small or Large shadow to be displayed behind/below the popup container. This uses the CSS property, box-shadow.

NOTE
Background color is not available in our plugin because you can already set that on your LearnDash LMS > Achievements > Settings page.

Popup Image

LearnDash requires you to choose an image when you create a new achievement. However, if you only want to display text, we provide the option for you to remove the image from the notification popup.

• Achievements Popup: Hide Image: Check this box to completely remove the image from the popup and only display the title and/or message.

Popup Title

There are two design options for the popup title:

• Popup Title: Font Size: Enter a number (in pixels) to adjust the font size of the achievement title.
• Popup Title: Color: Choose a custom color for the achievement title. This will override the color you have set on the LearnDash LMS > Achievements > Settings page.

The popup title will continue to be bolded, which is the LearnDash default.

Popup Message

There are two design options for the popup message (if you have added one):

• Popup Message: Font Size: Enter a number (in pixels) to adjust the font size of the achievement message.
• Popup Message: Color: Choose a custom color for the achievement message. This will override the color you have set on the LearnDash LMS > Achievements > Settings page.

NOTE
You can set the text color of the entire popup notification on the LearnDash LMS > Achievements > Settings page, however, this color applies to both the title & message. We provide color options for title & message separately, allowing you to use different colors for each.

My Achievements

These styles apply when using the My Achievements block or shortcode [ld_my_achievements].

• My Achievements: Icon Width: Enter a custom width for the icons (in pixels). The default icon width is 40px. The height will automatically adjust to maintain the aspect ratio of your original image. LearnDash recommends uploading a square image (width = height).

Other Notes

• When using the My Achievements block/shortcode, the tooltip that appears when you hover over an achievement image will inherit the tooltip colors from the Tooltips panel, as well as the Global Border Radius from the General Design panel.