Sticky Best Answer

Changing the "whoops" page image via CSS

  • 17 November 2021
  • 30 replies
  • 1312 views

Userlevel 3
Badge

Hello Community!

Does someone know how to change this picture? 

Thanks!

 

icon

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

View original

30 replies

Userlevel 7
Badge +7

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 +5

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

Userlevel 3
Badge

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 6
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 3
Badge

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 +5

@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 3
Badge

@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 6
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 3
Badge

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

 


 

Userlevel 4

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

 

This was very helpful. I found where to update the text as well under Localization via Edit and searching for “Whoops”. Thanks for all the tips.

Userlevel 7
Badge +7

 

This was very helpful. I found where to update the text as well under Localization via Edit and searching for “Whoops”. Thanks for all the tips.

in the localization app, open the English language and then search for “whoops”...there are many so be careful when changing these and test, test, test...if you have a sandbox, I highly recommend you make your changes there first.

 

Userlevel 3
Badge

Awesome! I accidentally stumbled across this. Great suggestions.

@nick.tosto - I tried it out and it works perfect for the desktop. Any suggestions for the mobile application?

Userlevel 7
Badge +5

Very cool! Could the replacement be a SVG @nick.tosto ?

 

You won’t be able to change this on mobile apps @mlubenski but maybe Docebo will add the white label/branding option in the future I hope! Add it to Ideas, it’d get MY vote!

Userlevel 3
Badge

Hey @nick.tosto  , thanks so much for this! Do you know how to change the Whoops text itself below the image? 😊

Userlevel 7
Badge +5

 

Hey @nick.tosto  , thanks so much for this! Do you know how to change the Whoops text itself below the image? 😊

https://in.leadingre.com/legacy/admin/index.php%3Fr%3DlangManagement/translateLang%26langcode%3Denglish

 

replace in.leadingre.com with yourcompany.docebosaas.com

 

This localization page is MONEY

I tried but didn’t work for me.

Userlevel 7
Badge +5

I tried but didn’t work for me.

Tried which - the css? Localization? Both?

 

happy to help!

Tried the CSS. It didn’t replace the image at all.

Just for reference: I am trying to change image for Course and LP widget.

Localization worked perfectly!

Userlevel 7
Badge +3

Tried the CSS. It didn’t replace the image at all.

Just for reference: I am trying to change image for Course and LP widget.

Localization worked perfectly!

Can you share a screenshot of what you did in the CSS Customization area? Might help troubleshoot as just tried and this is still working for me.

Userlevel 7
Badge +5

Still working for me too.

Userlevel 3

There are other images other than the woman kneeling. There is one of a person riding a scooter, and this image. Will this CSS replace all 3 images?

Userlevel 3

There are other images other than the woman kneeling. There is one of a person riding a scooter, and this image. Will this CSS replace all 3 images?

 

Userlevel 3
Badge +1

Hello it doesn’t seems to work for me this is how i am trying to do this:

Hope someone can help!

 

Reply