CSS to change illustrations new course player

Hi,

We have started to use the new course player and would like to change Docebo’s illustrations inside the course player for when the user is starting a new course, and when the course is completed.

I have managed to remove these two illustrations and add our own illustration to replace these, but I have not found a way to distinguish these two illustrations by CSS. Our solution today changes both these illustrations to the same. Does anyone have an idea on how to distinguish these by CSS in the new course player, so we can have two different illustrations?

Page 1 / 1

Here’s the code for the bike person but I’ll need to do some digging for the other one:

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

lrn-training-material-player-embedded-package dcb-ui-illustration svg {
    visibility: hidden;
}

Here’s the code for the bike person but I’ll need to do some digging for the other one:

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

lrn-training-material-player-embedded-package dcb-ui-illustration svg {
    visibility: hidden;
}

Hi @pmo I have tried to apply this code, but it is not working for all course player pages. For instance...here is a screenshot of the SCORM and the LTI - the image updated for the SCORM course player image...but not the LTI. Any ideas?

Oh boy. How did I manage this???

Oh boy. How did I manage this???

Oh wow that’s interesting!

I apologize everyone for the delay. I’ve been a little tied up with some other projects leading up to Inspire. I just wanted to checkin and say that I plan on investigating this further but it might not be til after inspire.

I’ll try to follow up late next week but don’t hesitate to tag me after inspire if I forget.

Have you managed to look into this yet @pmo?

@pmo were you able to figure this out? I was able to replace the confetti lady with the cat. How can I get this back? I liked this one the best!

Has anyone figured out how to replace the “dancing person” image? I successfully replaced the “person on bike” image but have not been able to replicate for the “dancing person” image.

Thanks in advance!

@pmo I’ve tried your code example but unfortunately just the hiding of the icon works on our platform. I tried so many variations to display the new image, but nothing works. Do you have an idea what might help?

nevermind! It was a syntax problem. I put the code on the top of our CSS and now it works. @hwolfehall maybe this works for you too?

Hi @Lena Could you elaborate your fix? I am still pulling my hair out with these ridiculous images. I want to just hide them all completely.

@hwolfehall Take a look at this post. I've posted the code to hide all the illustrations I've found.

Yes. I added your code to my Sandbox and NONE of the images are hidden or changed. I’m so ticked at Docebo for embedding images like this. It’s a nightmare to edit/maintain.

@hwolfehall The only other tip I have is to insert the code at the very beginning of the CSS code. This way you can make sure that other CSS adjustments do not affect the code. I hope this works for you!

@hwolfehall
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...

Thanks @Lena I wasn’t sure what I was doing wrong! The code I want is to just hide ALL of the ui-illustration elements at this point. Seems like crazy design to not be able to image swap those.

can you share your link to that idea? i’d love to upvote it!

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

Hello everyone,
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!

Updated Version:

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

Reply

Still haven't found what you're looking for?

Sign up for Docebo Community

Log in to Docebo Community

Scanning file for viruses.

This file cannot be downloaded