← back to all snippets

Course Grid Ribbon Styles

Updated 3 years ago
by Dave Warfel

On the LearnDash course grid, there are several different types of ribbons (in the top-left corner), and the CSS to style each type is a little different. First, we'll explain the different types and how to target them. Then we'll provide specific examples for changing styles.

The following pieces of code are called selectors. They are the first part of a CSS statement that tells the CSS which element(s) on the page to apply styles to.

General Ribbon
A ribbon showing a price, or any ribbon that does not fall into one of the other categories.

body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price

“Free” Ribbons
Displayed on free courses that the user has not enrolled in yet.

body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.free

“Enrolled” Ribbons
Displayed if a logged-in user is enrolled in that course.

body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled

Custom Ribbons
Displayed if you’ve provided a custom text label in the Course Grid settings.

body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.custom

Example CSS

We'll include several styles in the example below. Simply remove the line(s) that you don't want to use, and change the values for the styles you do want to change.

This example is for a General Ribbon. If you need to change another type of ribbon, use the appropriate selector mentioned above.

You need to be a premium member to continue accessing this content.

Sign Up Today →

All CSS code should either be placed in a child theme’s main CSS file (typically style.css), or the Additional CSS area of the WordPress Customizer.

CSS Video

Report

Harassment or bullying behavior.
Contains misleading or false information.
Contains abusive or derogatory content.
Contains spam, fake content or potential malware.

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts

Please allow a few minutes for this process to complete.

Report

You have already reported this .

How to Add CSS to Your Site

Forum Rules

Be Kind & Patient

We’re here to learn and/or help each other. Please don’t be mean, rude, or condescending. Treat all members the way you should be treating dogs and your elders—with the utmost love & respect.

External Links

✅ Other websites that add value, help solve problems & contribute to the discussion. ❌ Affiliate links are prohibited. (Site owners may use affiliate links to help support the site.)

Promotion

✅ You may promote your own products/services if they are relevant to an existing discussion. You must disclose your relationship with the product(s).
❌ You may not create new posts simply to promote your products.

Non-LearnDash Topics

❌ General (free) Forum: Only LearnDash-specific topics are allowed.
✅ Premium Forums: You are allowed to post other questions tangentially related to LearnDash. Please use the appropriately named forum. If it doesn’t exist, use the “LearnDash Integrations” forum.

Our Right to Remove

We reserve the right to remove any content, at any time, for any reason. We can also merge one post with another. We will exercise caution when removing content and always try to provide an explanation.