Skip to main content

Hi there,

I add a screenshot of one of our courses. We would like to have the blue icons that show that a step is complete (in red frame), to swith to green once finished. Is it possible to adjust the color of the “Done-Icon” to green? 

And would anyone one know about an information page in docebo university or so, where we can see all icons in all possible statuses that can occur with it? 

Thanks in advance and best regards
Roli 

your image is not visible 😕


Is it not? Duno, how come! It’s a regular.jpg file. I add it again as a png and hope it’s visible.

cheers Roli 


Hi there,

I was able to use the following CSS in my Sandbox Platform to change the icon colour for Completed Training Material on the new course player - 

/* Changes Background Colour of Completed Training Material START */
.ui-avatar-background-success {
background: #0000FF!important
}
/* Changes Background Colour of Completed Training Material END */

This changed the colour of the background when completed to the Hex Code which was Blue in the code I provided. You can amend this HEX code to whatever you require.

I would strongly recommend you implement this on a Stage/Sandbox environment and ensure you are happy this CSS targets what you are after and ensure no other areas are affected before implementing to a Production site.


Now that was a great hint, dear @DPatel 👍. Thank you ery mucht for it ! 

Our IT has looked at it and was able to change that very quckly, thanks to your input. Now all of us L&D Mgrs (about 30) are happy about a real quick win. 

Best regards and take care

Roli 


I have a similar issue when trying to update the color within the new course player table of contents. Anyone able to figure this one out?

 

 


Hi @Almix2 ,

I hope DPatel could help you as he/she helped us. I wouldn’t be able to anwer to you since I gave the hints we received to our developers and I don’t know what they did with it. 

Best Roli 


Thank you Roli for your response. I’m starting to believe the css code I’m entering into the course player css area, is not working at all for the new course player in my sandbox env.

It’s as if the code is “may be” updating the old course player and not the new course player. I’ve tried different pieces of css code and none of them work in the Course player css area. 
 

 


Hi @Almix2 

You are pasting the CSS in the wrong panel from Configure Branding and Look. The CSS you show in your screenshot targets the platform. The panel you are using targets HTML material that you use in courses.

Select Custom Styles Highlighted here - 

 

Paste the CSS you wish to implement in the 7.0 Custom CSS area on the platform and click Save Changes.

The platform will then refresh and then view the platform areas you have targeted.


I’m placing the code only for the Course Player. We have an extended enterprise and am only trying to update the course player for our extended enterprise. Disregard my original code image.

I only want this css code to target my course player. I tried putting it in custom styles prior as well but it did not work.

.dcb-ui-badge-status:where(edata-dcb-ui-version="2"]).dcb-ui-badge-status-negative.dcb-ui-badge-status-theme-info {

 --dcb-ui-badge-status-label-color: green!important;

}

 

 


Hi @Almix2 

Can you screenshot what you are trying to target here and change out on the platform?


Reply