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.
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
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
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
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
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.