Sticky Best Answer

Changing the "whoops" page image via CSS

  • 17 November 2021
  • 37 replies
  • 1647 views
dr.reinhardt
Rank
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

Bfarkas
Rank
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?

treedy
Rank
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/   

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

 

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

 

treedy
Rank
Userlevel 3
Badge

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

Lena
Rank
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?

Lena
Rank
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.

N
Rank
Userlevel 6
Badge +2

@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!

Lena
Rank
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.

Lena
Rank
Userlevel 2
Badge

Here is a screenshot.

N
Rank
Userlevel 6
Badge +2

@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.

Lena
Rank
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


Terms & ConditionsCookie settings