You can customize the text displayed on course tile ribbons on the Catalog page. The text displayed on the course tile ribbon is determined by the student's status in the course (Registered, Completed, Passed, or Failed). By default, the course tile ribbons will display as "Registered" or "Complete".
The following snippets are examples of how you can leverage this, and can be entered into the Global Head Snippet of your domain's Theming:
Catalog Course Tile CSS Examples
Change Course Registration/Completion message
<style>
.sj-course-ribbon-wrapper .sj-course-ribbon-text {
display:none;
}
.sj-course-ribbon-wrapper .sj-course-ribbon-registered:after {
content:"Enrolled";
}
.sj-course-ribbon-wrapper .sj-course-ribbon-text {
display:none;
}
.sj-course-ribbon-wrapper .sj-course-ribbon-complete:after {
content:"Done!";
}
</style>
Change Course Success Status message
<style>
.sj-course-ribbon-wrapper .sj-course-ribbon-passed .sj-course-ribbon-text {
display: none !important;
}
.sj-course-ribbon-wrapper .sj-course-ribbon-passed:after {
content: 'Passed' !important;
}
.sj-course-ribbon-wrapper .sj-course-ribbon-failed .sj-course-ribbon-text {
display: none !important;
}
.sj-course-ribbon-wrapper .sj-course-ribbon-failed:after {
content: 'Did not pass' !important;
}
</style>
**Note that in order to see these changes, the course must have the "Use lesson score as course score" option checked on the course level settings:
Change Course Success Status Ribbon color
<style>
.sj-course-ribbon-wrapper .sj-course-ribbon-passed {
background: lime !important;
border-color: lime !important;
}
.sj-course-ribbon-wrapper .sj-course-ribbon-failed {
background: red !important;
}
</style>