Sticky Best Answer

Changing the "whoops" page image via CSS

  • 17 November 2021
  • 37 replies
  • 1612 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

37 replies

Userlevel 7
Badge +4

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

Hope someone can help!

 

Is there a reason you are putting it in the 6.9 custom and not the 7.0?

Userlevel 3
Badge

Does anyone know how to remove the image altogether using CSS so that it doesn’t take up all that space?  @Bfarkas, would love if you might consider adding this to Farktools?  https://fark.tools/   

Userlevel 7
Badge +4

Does anyone know how to remove the image altogether using CSS so that it doesn’t take up all that space?  @Bfarkas, would love if you might consider adding this to Farktools?  https://fark.tools/   

So the current solve above does this, and then shows a new thing, have you tried just putting the hide part?

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

 

Userlevel 7
Badge +4

Ah, you prob want the space gone too right? If you make the above less specific, so its not just the iamge, but the container, should work:

doc-widget-channels ui-illustration,doc-widget-course-catalog ui-illustration, doc-widget-my-courses-and-learning-plans  ui-illustration{
display:none;
}

 

Userlevel 3
Badge

Thank you @Bfarkas that’s exactly what I was hoping for and it worked! :) 

Userlevel 2
Badge

Hi everyone, I'm having problems implementing this in the new course player. In the old layout I could simply apply the code. The svg graphic currently works, but no new graphic can be displayed. Does anyone have a solution for this?

Userlevel 2
Badge
lrn-training-material-player-embedded-package section.lrn-training-material-player-embedded-package-lesson-details-wrapper dcb-ui-illustration.ui-illustration.ui-illustration-size-md
{
background: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png) no-repeat center !important;
background-size: contain !important;
}
lrn-training-material-player-embedded-package section.lrn-training-material-player-embedded-package-lesson-details-wrapper dcb-ui-illustration.ui-illustration.ui-illustration-size-md svg
{
visibility: hidden;
}

This is the code I want to use to replace the graphic with the scooter in the course player. As I said, hiding it works, but unfortunately showing the new graphic does not. If I change the order of the code, it shows both graphics on top of each other.

Userlevel 6
Badge +1

@Lena - I think this code should do it:

.lrn-training-material-player-embedded-package-lesson-details-wrapper .ui-illustration {
background-image: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.lrn-training-material-player-embedded-package-lesson-details-wrapper .ui-illustration svg {
visibility: hidden;
}

Let me know if you still have issues!

Userlevel 2
Badge

Hi @nick.tosto, thanks for your help! But I have to say that this still doesn’t work on our platform. It’s the same problem: hiding works, new image doesn’t.

Userlevel 2
Badge

Here is a screenshot.

Userlevel 6
Badge +1

@Lena - can you try removing any other CSS that might be in the custom styles area? or at least move the new code to the top of the CSS? Sometimes syntax errors above cause issues with CSS that come later.

Userlevel 2
Badge

@nick.tosto oh, I really don’t know why I keep forgetting this. It works now! Thanks for your help and patience :)

Reply