Best Answer

Changing the "whoops" page image via CSS

  • 17 November 2021
  • 11 replies
  • 351 views

Userlevel 1

Hello Community!

Does someone know how to change this picture? 

Thanks!

 

icon

Best answer by nick.tosto 17 November 2021, 23:22

View original

11 replies

Userlevel 7
Badge +6

HI @dr.reinhardt not sure admins can change this...you can adjust the text via Localization though. You may be able to hide it all together using CSS

Userlevel 7
Badge +2

I feel like this should be added as an idea!! 

Userlevel 1

Thank you @lrnlab. My knowledge of CSS is less than 0 🤪. I will need some help from programmers I guess. I agree with @Annarose.Peterson; I’ll add it as an idea.

Userlevel 5
Badge +1

Hey @dr.reinhardt , this is possible with CSS. The idea is that you hide the image of the person and then set a background image on the image container element. The resulting CSS looks something like this:

 

/*Replace Kneeling Person with custom image */
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;
}
doc-widget-channels ui-illustration.ui-illustration svg,doc-widget-course-catalog ui-illustration.ui-illustration svg, doc-widget-my-courses-and-learning-plans ui-illustration.ui-illustration svg{
visibility: hidden;
}

 

Unless you like the image I chose, the only thing you would have to change is the image URL inside the parentheses on the background: url() part. You can get the image from somewhere online or you can use Docebo to host the image as well.

 

The CSS should be added in the Custom Styles area under Configure Branding and Look.

 

Hope this helps!

Userlevel 1

Wow! Thank you so much @nick.tosto! I will try this right away. I really appreciate you taking the time to answer. I’ll let you know if I succeed :)

Userlevel 7
Badge +2

@nick.tosto thank you for sharing!!  Totally using this code, and I’m going to beg the team to keep that image you used. 

:cat2::cat:

Userlevel 1

@nick.tosto  I copied and pasted and it works perfectly. Now, let’s say I have an image in my computer that I want to use, I would i embed that in instead of a URL link? Sorry, maybe it’s obvious, but I really havo no knowledge of CSS or programming :)

Userlevel 5
Badge +1

@nick.tosto  I copied and pasted and it works perfectly. Now, let’s say I have an image in my computer that I want to use, I would i embed that in instead of a URL link? Sorry, maybe it’s obvious, but I really havo no knowledge of CSS or programming :)

 @dr.reinhardt if you have an image on your computer you want to use, you’ll want to first upload it to Docebo, and then Docebo will give you the URL where it’s hosted and you can use that in your CSS. The link I shared towards the end of my first post shows how you can use an HTML widget on a widget page to upload the image and grab the URL.

Let me know if you have any trouble!

Userlevel 1

@nick.tosto Once again, thank you so much. Worked out perfectly! I really appreciate your help.

 


 

Userlevel 3

@nick.tosto I love the image you chose! Thanks for sharing.

Reply