Changing or hiding SCORM Package Icon via CSS

Hey Eric, great question. I’ve had a similar need in the past and there are a few ways to go about changing how these icons and labels display for your learners in the course player.

Changing/Hiding Learning Object Icons

Changing Learning Object Icons (Training Material Thumbnails)

It’s important to note that learning object icons in the course player only display for learning objects that do not have a thumbnail. One way to avoid your learners seeing these icons is to make sure that you add a thumbnail for every learning object in your platform.

You can do this from the Additional Info section when adding or editing Training Material from either a course or the Central Repository. This Knowledge Article has information about adding thumbnails for Training Material.

Hiding Learning Object Icons via CSS

You can also optionally hide Learning Object Icons via CSS. Use the following code to hide these icons.

/*remove LO file-type icons*/
.course-player-elements__navigation .course-navigation__wrapper .file-type {
    display: none !important;
}

The above snippet will hide the icon, but ensure that the LO progress tracking bubble will still appear for your learners. Note that this may appear strangely to them since they are meant to display in conjunction. You can avoid this issue by using thumbnails for your training material rather than hiding the icons via CSS. The LO progress tracker appears as an overlay on thumbnails rather than a bubble.

Note: please test this in your sandbox before deploying and understand that any changes you make to your platform may be affected by future Docebo product updates. It’s important to keep track of changes you make in your platform.

Changing/Hiding Learning Object Labels

Changing Learning Object Labels

As @alekwo mentioned, you can update the labels for Learning Objects via Docebo’s Localization Tool. Navigate to  Admin Menu > Localization Tool. Navigate to the language you’d like to translate and select the hamburger icon to access translations for that language.

The Learning Object labels live under the storage module. To find them quickly, select storage in the Module dropdown at the top of the page, then type _LONAME in the search bar to surface all of the Learning Object labels. Double-click on any word in the Translation column that you’d like to translate, then select Confirm. You can view these updates by refreshing your platform.

Note: Be sure to track these translations somewhere outside of Docebo, as future Docebo updates may impact these translations. @lrnlab shared some great tips on logging changes to your platform in the following post: 

Hiding Learning Object Labels via CSS

You can also optionally hide Learning Object labels via cSS. Use the following code to hide these labels: 

/*remove LO file type label*/
.tree-view .item.chapter .info {
    display: none !important;
}

Note: please test this in your sandbox before deploying and understand that any changes you make to your platform may be affected by future Docebo product updates. It’s important to keep track of changes you make in your platform.