Skip to content

Instantly share code, notes, and snippets.

Last active November 12, 2020 00:28
What would you like to do?
Revert back to the original LearnDash course grid ribbons.
* This code is designed for those who have the Design Upgrade for LearnDash plugin installed.
* It also applies to the Pro version.
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
/* Add the old style of ribbons back to the course grid */
body .ld-course-list-items.row .ld_course_grid,
body .ld-course-list-items .ld_course_grid .thumbnail.course,
#ld_course_list .ld-course-list-items .ld_course_grid {
overflow: visible;
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price {
top: 10px;
left: -8px;
border-radius: 0;
/* optional: if you want to set them to a specific width */
width: 100px;
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price::before,
body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled::before {
display: block;
border: 4px solid transparent;
border-top: 4px solid #666;
border-right: 4px solid #666;
content: "";
position: absolute;
left: 0;
bottom: -8px;
body .ld-course-list-items .ld_course_grid {
border-radius: 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment