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?
These are all images we found. I hope this helps :)
Thanks so much
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;
}
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;
}
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?
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 ;)
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...
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;
}Hi again,
here is the new code to replace the visuals. The update has actually made it easier to address the individual graphics. In my example, I have always used the same graphic as the new background image, but you can insert different URLs here. You can also change the background-size. If you only want to hide the visuals, just use the lower part of the code (from /*Hide Docebo Visuals*/).
Here is the link to my idea: https://community.docebo.com/ideas/option-to-upload-your-own-visuals-12083
I hope the code works for you!
/*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;
}Hi again,
here is the new code to replace the visuals. The update has actually made it easier to address the individual graphics. In my example, I have always used the same graphic as the new background image, but you can insert different URLs here. You can also change the background-size. If you only want to hide the visuals, just use the lower part of the code (from /*Hide Docebo Visuals*/).
Here is the link to my idea: https://community.docebo.com/ideas/option-to-upload-your-own-visuals-12083
I hope the code works for you!
THANK YOU!!!!!!!!!!!!! (I’ve also upvoted your idea)
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.