Skip to main content
StickyBest Answer

Changing the "whoops" page image via CSS


Did this post help you find an answer to your question?
Show first post

Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • September 25, 2023
julientrudel wrote:

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
Helper I
Forum|alt.badge.img
  • Helper I
  • November 24, 2023

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
Hero III
Forum|alt.badge.img+5
  • Hero III
  • November 27, 2023
treedy wrote:

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
Hero III
Forum|alt.badge.img+5
  • Hero III
  • November 27, 2023

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
Helper I
Forum|alt.badge.img
  • Helper I
  • November 27, 2023

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


Lena
Helper I
Forum|alt.badge.img
  • Helper I
  • June 21, 2024

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
Helper I
Forum|alt.badge.img
  • Helper I
  • June 21, 2024
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.


Forum|alt.badge.img+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
Helper I
Forum|alt.badge.img
  • Helper I
  • June 21, 2024

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
Helper I
Forum|alt.badge.img
  • Helper I
  • June 21, 2024

Here is a screenshot.


Forum|alt.badge.img+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
Helper I
Forum|alt.badge.img
  • Helper I
  • June 21, 2024

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


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings