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 RibbonA 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” RibbonsDisplayed 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” RibbonsDisplayed 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 RibbonsDisplayed 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.