Skip to main content

Does anybody know how to change the illustrations that are featured throughout the platform?  For instance this one that shows up if a course widget is empty (e.g. if a learner has finished all their courses and is not currently enrolled in anything new).  It would be a nice design customization if we could make this image something from our corporate culture, instead of being a random image that doesn’t fit our design language.  I know how to change the accompanying text using the localization tool, but don’t know how to change the image itself.

 

 

It would be nice if there was an option to replace this image easily from the UI, but for now it’s possible to do with CSS:

 

/* Replace Blank Slate Image on Channels, Catalog, and My Courses widget*/
doc-widget-channels ui-illustration.ui-illustration,doc-widget-course-catalog ui-illustration.ui-illustration, doc-widget-my-courses-and-learning-plans  ui-illustration.ui-illustration{
    background: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png) no-repeat center;
    background-size: contain;
}
/* Hide Blank Slate image on Channels, Catalog and My Cuorses Widgets*/
doc-widget-channels ui-blank-slate g,doc-widget-course-catalog ui-blank-slate g, doc-widget-my-courses-and-learning-plans ui-blank-slate g {
    	visibility: hidden;
}

 

You’ll want to replace the image URL in that code with your own unless you like my cat picture.

 

Remember that it’s also possible to use Docebo to host images through the HTML widget. Demo showing how to do this here.

 

Hope this helps!

For everyone following this post, I also wanted to point to the following post that covers the same topic in a bit more detail.

 

 

Thanks as always to @nick.tosto for continuing to empower this community with the tools to customize their platforms to the Nth degree!

Reply


Terms & ConditionsCookie settings