Customize Course Tile Ribbons using CSS

Follow

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

 Screen_Shot_2017-10-30_at_1.40.13_PM.png

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

Screen_Shot_2017-10-30_at_1.41.50_PM.png

<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

Screen_Shot_2017-10-30_at_1.59.27_PM.png

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

Screen_Shot_2017-10-30_at_2.03.21_PM.png

 

 

Change Course Success Status Ribbon color

Screen_Shot_2017-10-30_at_2.00.05_PM.png

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

 

Have more questions? Submit a request

Comments

Powered by Zendesk