Skip to main content

Hi, my first post here, I’m hoping you can help!

Back in July, my company’s course player looked like this:

You can see that I used CSS to remove “File” and “SCORM” from below the module title. I also used CSS to replace the default images, depending on the lesson status.

 

Now, Docebo have done something to the course player with an update in September (https://help.docebo.com/hc/en-us/articles/19807231971474-Product-updates).

 

Now, the course player is different and my CSS is having no effect and it looks like this:

 There are now thumbnails instead of the pink status icons, the status is shown by text in the pinkish background, “File” and “SCORM” are shown and the default images are back too. 

 

Is anyone facing this issue too? Does anyone have a fix to revert back to how it was?

 

Thanks

Hey @lukeheatgeek
You can use this code to replace the Docebo Visuals:

/*New Visuals*/

/*Woman Party SCORM COMPLETED*/
dcb-ui-blank-slate:where([illustrationsvgname="well_done"]) {
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
}
/*Woman on Scooter SCORM*/
dcb-ui-blank-slate:where([illustrationsvgname="on_the_way"]) {
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
}
/* Woman Desktop QUIZ*/
dcb-ui-blank-slate:where([illustrationsvgname="select"])
{
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
}
/*Clipboard Folder FILE */
dcb-course-lesson-player-file .dcb-course-lesson-player-file-container dcb-ui-blank-slate
{
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 30px;
}
/*Desktop Checkmark SURVEY*/
dcb-ui-blank-slate:where([illustrationsvgname="survey"])
{
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
}
/*Ufo NO TRAINING MATERIAL*/
dcb-course-blocked dcb-ui-blank-slate dcb-ui-illustration:where([data-dcb-ui-version="2"])
{
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;

}
/*Kneeling Woman NO CATALOG CONTENT*/
.course-catalog-blank-slate.ng-star-inserted .ui-illustration
{
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/*Lock Prerequisites not fulfilled*/
dcb-ui-blank-slate:where([illustrationsvgname="access_restricted"]) dcb-ui-illustration
{
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*Hide Docebo Visuals*/
svg:where([data-illustration-name="on_the_way"]),
svg:where([data-illustration-name="well_done"]),
svg:where([data-illustration-name="select"]),
svg:where([data-illustration-name="different_content_files"]),
svg:where([data-illustration-name="survey"]),
svg:where([data-illustration-name="something_wrong"]),
svg:where([data-illustration-name="access_restricted"]),
.course-catalog-blank-slate.ng-star-inserted ui-blank-slate svg
{
    visibility: hidden;
}

I updated this code yesterday, since it wasn’t working after the last update.

Thanks! This worked for me. Really appreciate it. 

You wouldn’t happen to know how to hide content type e.g. ‘File’ / ‘SCORM’? 

 

 

This seams to have worked:

 

/* HIDE "SCORM" AND "FILE" TEXT UNDER LESSON TITLES */

>data-cy="lesson-content-type"] {

   display: none !important; 

}

 

@lukeheatgeek 

You could also use the Localisation tool here.  It seems that the recent update has reset some of these elements if they were already updated:

 

Thanks for sharing the css here.

Reply


Terms & ConditionsCookie settings