New error page - how to change the image here?

Hi @revote !  We hadn’t missed your question about this in the phrases thread - sorry we haven’t been able to get you an answer yet.  I’ve been through all of our hidden phrases and also can’t find a phrase for this image.  I’m still looking for an answer.  As a last resort I expect it’s potentially possible to have a bit of third-party script code that ‘swaps’ the image for something else.  But let me chase some more for you.

Nice, thanks @Kenneth R. I am looking forward 😊

Thanks a lot @Kenneth R, I’ll test this. Hopefully there will be other/better solution in the future but I think we can use this by now 🙂

It seems there is new 403 image as well.

I hope that when you renew your platform, no matter how less or much, you send info & instructions to your customers. Thanks 😊

img[src="https://d3qhpmzl5oynt5.cloudfront.net/2024-07-18-13-25-05-b733e7f227/dist/images/errors/404.png"] {
    content: url('https://via.placeholder.com/404'); /* URL of the new image */
}

I added this code to our sandbox but your image remains. I replaced the source image url and new image url as well. Any ideas?

The image `src` attribute value will not necessarily be the same across communities/users.
 

@revote I was able to get the above css idea to work by changing the selector to:
.destination_error_image[src*="404.png"] {

  content: url("https://via.placeholder.com/404");

}

And, I’m assuming this should work for the 403:
.destination_error_image[src*="403.png"] {

  content: url("https://via.placeholder.com/404");

}

img[src="https://d3qhpmzl5oynt5.cloudfront.net/2024-07-18-13-25-05-b733e7f227/dist/images/errors/404.png"] {
    content: url('https://via.placeholder.com/404'); /* URL of the new image */
}

Hey @revote - I’m going to DM you so I can take a look with you on your sandbox.  :)

And just to close the loop here, the CSS code above worked but we needed to update the URL of the standard 404 image as it wasn’t the same as in the environment I tested.  :)

Yeah, I can confirm, works now ok. Thanks @Kenneth R 

I think I was using correct url´s, with sandbox site sandbox url´s 😀

Hmm, it seems that url of the original error image keep changing and that´s why this workaround works only until url the changes. It seems that url changes 1-2 days period.

Any ideas @Kenneth R?

EDIT: We can use the error page without error images, if it is easier?

Yep, with this solution it doesnt matter even the source url keep changing during the time.

Thanks.

Hey @revote @Kenneth R, can I bug to ask you WHERE you load the CSS to swap out the image. Sorry, basic newbie question! 

Here.

Note: Test code in your testing site before adding code to your live community.

I´ll add this hint to this topic as well. In cases if you want to hide image, not to change it to another:

.destination_error_image[src*="404.png"],
.destination_error_image[src*="403.png"] {
  display: none;
}

@revote WOHOOOOO It worked. Thanks so much for the guidance!!! 

Glad to help 👍

Hi ​@Kenneth R!

I’ve been trying to replace the image, and I followed your instructions (and updated the Gainsight image link: https://dowpznhhyvkm4.cloudfront.net/2025-06-03-13-07-50-469ca4191e/dist/images/errors/404.png), but it keeps showing the error. 

Unknown CSS property "https" (line: 42, char: 59)
Unterminated "property content" (line: 43, char: 1)

Could you help? :)

Hi ​@Petra P - I had a quick look at your community but don’t see any CSS there.  Or were you testing on sandbox?  Happy to take a look - let me send you a PM.  :)