Skip to main content
Best Answer

List of all stock illustrations

  • 3 June 2024
  • 7 replies
  • 141 views

Does anyone have a comprehensive list of all of the illustrations? I’ve found some CSS to re-skin a few (thanks to everyone who has contributed those!), but am struggling to locate all of them.

 

Person on Bike

Dancing person 

Kneeling Person

 

Which ones am I missing?

7 replies

Lena
Rank
Userlevel 2
Badge

These are all images we found. I hope this helps :)

K
Rank
Userlevel 1

Thanks so much @Lena, this is great. Might you know the name of each illustration or how to locate them?

For instance, I found the below CSS to replace the person on the bike, but I can’t crack the code on what each illustration is called to replace them with custom imagery (or just more cats like the example image lol).

 

 

/*Replace Person on Bike with custom image */
lrn-training-material-player-embedded-package dcb-ui-illustration
{
    background: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png) no-repeat center;
    background-size: contain;
}

Lena
Rank
Userlevel 2
Badge

I'm working on that right now. When I'm done, I'll share the code here :)

Lena
Rank
Userlevel 2
Badge

This seems to be more difficult with the new course player than before. At least it no longer works with the code example from the old layout. Hiding works, but unfortunately showing a new graphic does not.
I will post a new question about this and possibly contact support. I'll keep you up to date!

K
Rank
Userlevel 1

Thank you!

Lena
Rank
Userlevel 2
Badge 
/*New Visuals*/

/*Woman on Scooter SCORM*/
.lrn-training-material-player-embedded-package-lesson-details-wrapper .ui-illustration:has(#well-done-a) {
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/*Woman Party SCORM COMPLETED*/
.lrn-training-material-player-embedded-package-lesson-details-wrapper .ui-illustration:has(#on-the-way-a) {
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Woman Desktop QUIZ*/
.dcb-te-player-quiz-launcher-title-only.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;
}
/*Clipboard Folder FILE */
.lrn-training-material-player-file-illustration .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;
}
/*Desktop Checkmark SURVEY*/
.dcb-te-player-survey-launcher-wrapper.ui-media-lg.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;
}
/*Ufo NO TRAINING MATERIAL*/
.lrn-course-player-no-training-material.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;
}
/*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;
}
/*Hide Docebo Visuals*/
.course-catalog-blank-slate.ng-star-inserted .ui-illustration svg,
.lrn-course-player-no-training-material.ng-star-inserted .ui-illustration svg,
.dcb-te-player-survey-launcher-wrapper.ui-media-lg.ng-star-inserted .ui-illustration svg,
.lrn-training-material-player-file-illustration .ui-illustration svg,
.dcb-te-player-quiz-launcher-title-only.ng-star-inserted .ui-illustration svg,
.lrn-training-material-player-embedded-package-lesson-details-wrapper .ui-illustration svg
{
    visibility: hidden;
}

Hi, here is the code you can use to insert your own images on Docebo 😊
In this example, I've only used the cat image, but you can of course insert links to your own images 😉
I have only included the visuals which are still visible on our platform using our settings and customizations. It is therefore possible that you will see other visuals from Docebo that are not replaced by the code. One example is the visual of the woman with a headscarf, which is displayed when an xAPI learning material has not been passed. Enjoy the code!
P.S.: If the code does not work for you directly, try inserting it at the very beginning of your CSS code. I also struggled with this at the beginning.

Lena
Rank
Userlevel 2
Badge

A small addition: The visual with the party woman appears in several places and as this has a unique ID, the class selector in front of it can also be removed. This means that this line of code replaces the visual in all areas with the new image.
 

/*Woman Party SCORM COMPLETED*/
.ui-illustration:has(#on-the-way-a) {
    background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ui-illustration svg:has(#on-the-way-a)
{
    visibility: hidden;
}

 

Reply


Terms & ConditionsCookie settings