List of all stock illustrations

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!

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)

Lena wrote:

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([data-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?

Hi! For me the above codes didn’t work so i had to find new ones. I found two main scenarios: replacing the image URL directly (simple change) and code-embedded SVG. The SVG was trickier to replace as the solution i found was to hide it and to add the replacement as a background image to the parent object. I must admit the Docebo SVG images are a pretty nice solution, they do adapt with the platform colors, however they’re not images from our brand repository.

Here are the codes I used in our platform:

/*REPLACE Thumbs up in tasklist widgets*/
.blank-slate-image img[src="/public/images/core/HAPPY-06.svg"] {
  content: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
}


/*REPLACE documents folder in statistics widget*/
.blank-slate-image img[src="/public/images/core/EMPTY-02.svg"] {
  content: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
}


/*REPLACE Kneeling woman with dog in courses widgets (My courses, Completed courses, In progress courses, etc.*/
.my-courses-and-learning-plans-content-wrapper .ui-illustration svg {
  display: none !important;
}
.my-courses-and-learning-plans-content-wrapper .ui-illustration span {
  display: block;
  width: 100%;
  min-width: 258px;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/*REPLACE magnifier with documents in search results*/
dcb-ui-blank-slate[illustrationname="no-result-found"] .ui-illustration svg {
  display: none !important;
}
dcb-ui-blank-slate[illustrationname="no-result-found"] .ui-illustration span {
  display: block;
  width: 100%;
  min-width: 258px;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


*REPLACE the lock between trees for locked content, due to prerequisites*/
/* Step 1: Hide the original SVG */
lmn-blank-slate[illustrationsvgname="access_restricted"] lmn-illustration svg {
  display: none !important;
}

/* Step 2: Apply custom background image */
lmn-blank-slate[illustrationsvgname="access_restricted"] lmn-illustration {
  display: block !important;
  width: 100%;
  min-height: 204px; /* Adjust the height to fit */
  aspect-ratio: 221 / 160;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Optional: reduce spacing between image and message */
lmn-blank-slate[illustrationsvgname="on_the_way"] .lmn-blank-slate-title {
  margin-top: 4px !important;
  padding-top: 4px !important;
}


/*REPLACE woman keeling with dog in no upcoming events area, for the current ILT course/session (happened when an ILT session has passed and there are no upcoming ones in the lower right side of the screen*/
/* Step 1: Hide the original inline SVG */
dcb-ui-blank-slate[illustrationname="take-a-break"] .ui-illustration svg {
  display: none !important;
}
/* Step 2: Add a custom background image */
dcb-ui-blank-slate[illustrationname="take-a-break"] .ui-illustration span {
  display: block !important;
  width: 100%;
  min-width:258px;
  height: 204px; /* same as SVG height to avoid layout shift */
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/*REPLACING the ufo when there are no sessions available (happens when the user didn’t attend a past session and opens the course page)*/
/* Step 1: Hide the original SVG image */
dcb-ui-blank-slate[illustrationname="something-wrong"] .ui-illustration svg {
  display: none !important;
}
/* Step 2: Add your custom image as a background */
dcb-ui-blank-slate[illustrationname="something-wrong"] .ui-illustration span {
  display: block;
  width: 100%;
  height: 100%;
  min-width:258px;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/*REPLACE course evaluation image (when a learner finishes an eLearning and has to go through its survey)*/
lmn-blank-slate[illustrationsvgname="survey"] lmn-illustration svg {
  display: none !important;
}
lmn-blank-slate[illustrationsvgname="survey"] lmn-illustration {
  display: block;
  width: 100%;
  min-height: 204px;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Optional: Reduce spacing between the image and the title text */
lmn-blank-slate[illustrationsvgname="survey"] .lmn-blank-slate-title {
  margin-top: 8px !important;
}


/* REPLACE the 'well_done' survey completion illustration, a woman in a happy pose, when a learner finishes a survey*/
lmn-blank-slate[illustrationsvgname="well_done"] lmn-illustration svg {
  display: none !important;
}
lmn-blank-slate[illustrationsvgname="well_done"] lmn-illustration {
  display: block;
  width: 100%;
  min-height: 204px;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Optional: reduce spacing between image and success text */
lmn-blank-slate[illustrationsvgname="well_done"] .lmn-blank-slate-title {
  margin-top: 8px !important;
}


/* REPLACE the file viewer illustration with files and folders (when a learner selects the course material for an eLearning course) */
/* 1. Hide the specific SVG image */
.dcb-course-lesson-player-file-container svg[data-illustration-name="different_content_files"] {
  display: none !important;
}
/* 2. Add custom image as background to its container */
.dcb-course-lesson-player-file-container lmn-illustration.lmn-illustration-size-md {
  background-image: url('https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-height: 204px;
  width: 100%;
  display: block;
}


/*REPLACE woman looking up when lesson failed (when a learner finishes a quiz and fails)*/
lmn-blank-slate[illustrationsvgname="denied"] lmn-illustration svg {
  display: none !important;
}
lmn-blank-slate[illustrationsvgname="denied"] lmn-illustration {
  display: block;
  width: 100%;
  min-height: 204px;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Optional: reduce spacing between image and message */
lmn-blank-slate[illustrationsvgname="denied"] .lmn-blank-slate-title {
  margin-top: 4px !important;
  padding-top: 4px !important;
}


/*REPLACE the woman on scooter for continuing a lesson (when a learner opens a course in progress, selects a locked chapter and then selects the chapter which was not finished)*/
/* Step 1: Hide the original SVG */
lmn-blank-slate[illustrationsvgname="on_the_way"] lmn-illustration svg {
  display: none !important;
}
/* Step 2: Apply custom background image */
lmn-blank-slate[illustrationsvgname="on_the_way"] lmn-illustration {
  display: block !important;
  width: 100%;
  min-height: 204px; /* Adjust the height to fit */
  aspect-ratio: 221 / 160;
  background-image: url("https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Optional: reduce spacing between image and message */
lmn-blank-slate[illustrationsvgname="on_the_way"] .lmn-blank-slate-title {
  margin-top: 4px !important;
  padding-top: 4px !important;
}

I think it’s also important to consider the scenarios when/where all these images appear, in order to choose relevant ones. The only one I managed to verify with Docebo is the Thumbs Up with the text Nothing is happening here right now. Take a well-deserved break (which can be changed via the Localization tool):
•    Course iframe
•    Checklists
•    Observation Checklists
•    My Tasks - certification to renew
•    My Tasks - Checklist
•    My Tasks tiles
•    Upcoming Meetings widgets

In case you managed to verify exhaustively the others, please share. Although I think this information should come from Docebo, and preferably as a tool embedded in the platform, as per the idea above.

I have a question for the community: which is the location you found to host the images? I uploaded the images in the notification system and referred their addresses from there, in the CSS, it seemed easy but also improvised.