Customizing "Page doesn't exist" page

Support

AI-generated summary

Customizing “Page doesn’t exist” page

Several users are seeking a way to customize the “Page doesn’t exist” page. marina wants to replace the default message with an image, but notes that there is no plugin outlet available for this purpose. codinghorror suggests adding a plugin outlet, but eviltrout explains that it’s not a simple task due to the page being generated both server-side and client-side, and that it would require differentiating between various error types.

Despite this, Frank_Johnette offers a potential workaround using JavaScript, which can replace the default message with custom HTML, including images. This solution has not been tried by the original poster, but may be a viable option for customizing the page.

1

Hi community!

I am trying to customize the “Page doesn’t exist” page. It currently shows the words " Oops! That page doesn’t exist or is private.". However, I would like to replace this with an image instead. Is there any way to do this? I was thinking of using plugin-outlets but there does not seem to be one for it. Thanks in advance.

2

Maybe we should have a plugin outlet for this @eviltrout?

3

Unfortunately it’s not simple since there are two versions of that page. One is generated server side and one is generated client side, depending on the error. We could add an outlet to the client side page but you wouldn’t always see it. Also I should note that page is used for all exceptions so you’d have to differentiate between a network error, a 500 error, a 404, etc.

4

Just wanted to check, if there is any way to solve this yet? We would love to modify that page too if possible at all.

5

It has not changed, sorry.

6

Sure understand. Thanks for the fast reply.

7

I was able to customize the message with a little Javascript:

window.addEventListener("DOMContentLoaded", function(){
    document.querySelector('.page-not-found .title').innerHTML = "NEW MESSAGE HERE";
});

The script replaces the HTML where the ‘Oops! That page doesn’t exist or is private’ is located. I haven’t tried it, but in theory, you could add HTML to render a picture.