Skip to main content
revote
VIP ⭐️⭐️⭐️⭐️⭐️
Jul 18, 2024 11:52 AM UTC
Solved

New error page - how to change the image here?

I havent seen this image before. Problem is that it doesn´t follow our brand guidelines.

How to change it?

 

Kenneth R
Kenneth RAnswer
Expert ⭐️⭐️
Jul 18, 2024 1:52 PM UTC

Hey @revote - I might still get a better answer, but here is an approach I was just able to validate as workable in our staging environment.  This simple bit of CSS will simply swap the image out:

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 */
}

 

19 replies

Kenneth R
Expert ⭐️⭐️
Jul 18, 2024 12:36 PM UTC

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.

Translate
revote
revoteAuthor
VIP ⭐️⭐️⭐️⭐️⭐️
Jul 18, 2024 12:39 PM UTC

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

Translate
Kenneth R
Kenneth RAnswer
Expert ⭐️⭐️
Jul 18, 2024 1:52 PM UTC

Hey @revote - I might still get a better answer, but here is an approach I was just able to validate as workable in our staging environment.  This simple bit of CSS will simply swap the image out:

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 */
}

 

Translate
revote
revoteAuthor
VIP ⭐️⭐️⭐️⭐️⭐️
Jul 18, 2024 3:47 PM UTC

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 🙂

Translate
revote
revoteAuthor
VIP ⭐️⭐️⭐️⭐️⭐️
Jul 19, 2024 11:27 AM UTC

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 😊

 

Translate
revote
revoteAuthor
VIP ⭐️⭐️⭐️⭐️⭐️
Jul 19, 2024 12:11 PM UTC

Hey @revote - I might still get a better answer, but here is an approach I was just able to validate as workable in our staging environment.  This simple bit of CSS will simply swap the image out:

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?

Translate
Contributor ⭐️
Jul 19, 2024 4:04 PM UTC

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");

}

Translate
Kenneth R
Expert ⭐️⭐️
Jul 22, 2024 7:20 AM UTC

Hey @revote - I might still get a better answer, but here is an approach I was just able to validate as workable in our staging environment.  This simple bit of CSS will simply swap the image out:

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?

 

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

Translate
Kenneth R
Expert ⭐️⭐️
Jul 22, 2024 8:17 AM UTC

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.  :)

Translate
revote
revoteAuthor
VIP ⭐️⭐️⭐️⭐️⭐️
Jul 22, 2024 8:52 AM UTC

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 😀

Translate