Question

CSS to change illustrations new course player

  • 22 August 2023
  • 7 replies
  • 196 views
K
Rank
Userlevel 1

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?  

 

7 replies

pmo
Rank
Userlevel 7
Badge +2

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



 

hwolfehall
Rank
Userlevel 5
Badge

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?  

SCORM Player Image
 LTI Player Image

 

hwolfehall
Rank
Userlevel 5
Badge

Oh boy.  How did I manage this???  

 

pmo
Rank
Userlevel 7
Badge +2

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. 

K
Rank
Userlevel 1

Have you managed to look into this yet @pmo? ☺️

sfrost
Rank
Userlevel 4
Badge +2

@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!

 

S
Rank

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.

Download Again

Thanks in advance!

Reply


Terms & ConditionsCookie settings