If you are using a custom CSS for the legacy player, you will want to update the css for the modern player before switching over.
1 - Click the `Apps` tab
2 - Click the application you wish to use a custom CSS
3 - Import your CSS file at the bottom of the page. There is also a sample CSS file for you to download and use as a template.
For the most part, the css selectors you used to style the legacy player haven't changed much in the modern player but there are some differences. If you need some help migrating your legacy stylesheet, here's a breakdown of css selectors we commonly see in custom style sheets and their equivalent in the modern player:
Legacy |
Modern |
Explanation |
|---|---|---|
| #tt_top_navMenu | #rscp-header-row | Top Navigation bar containing course title and navigation controls |
| #top_title | #courseTitleText | Course title in nav bar |
| #top_credit | n/a | “POWERED BY THE SCORM ENGINE” |
| .ProgressBar | #rscp-progressbar | Progress bar for multi-sco content |
| .progressText | #progressText | Text displayed showing number of completed scos / total number |
|
.progressXImage .progressYImage |
#progressImage | Progress bar for multi-sco content. In the legacy player, there are two image elements (x & y) side by side to represent completed and uncompleted scos. In the modern player this is a single image that spans the width of the progress bar when complete |
| #MenuPlaceHolder | #MenuPlaceHolderDiv | Table of contents menu container |
|
.menulink .enabledMenulink .disabledMenulink .activeMenulink |
.menulink .enabledMenulink .disabledMenulink .activeMenulink |
Link element in table of contents for each individual sco. Enabled menu links are active links to take you to a page in the course. Disabled menu links represent section titles. Active menu link represents the currently selected sco |
|
#exit_dialog_div .exit_dialog_btn #exit_dialog_suspend #exit_dialog_exit #exit_dialog_cancel |
#returnToLmsMenu #exit_dialog_suspend_li #exit_dialog_suspend #exit_dialog_exit_li #exit_dialog_exit |
The 2004 4th edition exit type selector changed from a frame to a drop-down menu. |
|
#toggleMenu #previous #next #closeSco #viewDebug #returnToLmsNoDebug #returnToLms |
#toggleMenu #previous #next #closeSco #viewDebug #returnToLmsNoDebug #returnToLms |
Navigation control buttons. Unchanged in the modern player |