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

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

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

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!

Thank you!

/*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.

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

/*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;
}

I implemented this code and still get the party woman image after a quiz submission. Is there another bit of CSS code i’m missing?

@Scott Foster can you send a screenshot?

@Scott Foster 
Hey there! I just wanted to let you know that since the latest update for the course player, my code isn't working for the most visuals. I've posted an idea that this should be an option via the Admin menu. I'll try to change my code so that it works with the update, but it might take a little while...

In the meantime, you can vote for my idea ;)

Thank you Lena! I have upvoted your idea and forwarded it on to others on my team. 

/*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;
}
/*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"])
{
    visibility: hidden;
}

THANK YOU!!!!!!!!!!!!! (I’ve also upvoted your idea)

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

Where did you find this? 

@sfrost nowhere A dear colleague searched for all the visuals and made that list for me.

Does anyone know how we hide this image?  

Hi @Lisa D,

There have been some updates to the CSS. This code should hide all visuals:

/*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="tab_error"]),
.course-catalog-blank-slate.ng-star-inserted ui-blank-slate svg
{
    visibility: hidden;
}

Thank you @Lena - this image still appears for us.  Perhaps we have some CSS code which is preventing it from being removed.

@Lisa D That may be the case. To rule this out, the code must simply be placed at the very beginning. Then it should work.

We are having trouble replacing this image. Any help appreciated!!

Hi ​@Scott Foster,
this one is new to me. Can you explain when this visual appears? Maybe you can even find out what the ID of this image is by rightclicking and click on “Inspect”. You can search in the CSS for “data-illustration-name”.
 

Hi!

So far, I’ve been able to successfully hide all of the Docebo stock illustrations with your coding :)

But the one that’s been giving me grief is the *Kneeling Woman NO CATALOG CONTENT* image. I’ve managed to hide it finally by adding this line of code in the /*Hide Docebo  Visuals*/ section:

.dcb-ui-illustration:where(ndata-dcb-ui-version="1"]) svg, ui-illustration svg

However, I haven’t been able to replace it with my own image:

/*Kneeling Woman NO CATALOG CONTENT*/

.course-catalog-blank-slate.ng-star-inserted .ui-illustration

{

    background-image: url(https://cdn5.dcbstatic.com/files/h/r/hrcfoundation_docebosaas_com/userfiles/13047/lightbulb_no_info.png);

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

}

Do I need to add an additional section before replacing /re-skinning the stock image?