How to get a custom 404 page rendered within the regular theme?

[1coderookie]

Hi everybody,

first of all I want to say a huge thank you to the team for giving us the material theme - I recently just set up a little GH page with it and the look, feel and functions are just great! I'm really stoked about it and once I 'll get my new little page done I'm going to use the same for my other two documentation pages.

Unfortunately I do have a question though and please forgive me if this might be a stupid one, but I didn't find a solution yet and just can't figure out what I'm doing wrong, so I hope someone here can help me out..
I'm not a programmer and adding a custom 404 page with inline CSS already was a hard way to go but finally I made it. I added it as 404.html in the "overrides" folder and added this to the "theme" part in the mkdocs.yml file:

  name: material
  custom_dir: overrides
  
  # 404 page
  static_templates:
    - 404.html

The problem for me now is that it doesn't render in the theme (like a regular page) - it's an entire 'new' page which therefore just looks completely different. I also tried to add the html code as a 404.md page and put that in the above mentioned section, but that didn't change anything..
So I wonder if and how I could get it managed that my custom 404 page will be shown inside of the theme, so that e.g. the top header and so on are still visible - like that people can see that they're still on that page.
I hope I could make it clear, I don't know how to describe it better.. :(

Just in case it's an important information: I'm not using a local installation and then pushing it to GH, instead I make everything online at my repo and get the page built and deployed using GH actions.

This is my repo and the page I'm talking about:
https://github.com/1coderookie/KobraGoNeoInsights
https://1coderookie.github.io/KobraGoNeoInsights/

I hope you guys can help me out - thanks in advance :)

[squidfunk]

You can extend the theme and override selected blocks of the template. See our 404.html for reference:

mkdocs-material/src/404.html

Lines 23 to 28 in 48e8b2b

	{% extends "main.html" %}
	<!-- Content -->
	{% block content %}
	<h1>404 - Not found</h1>
	{% endblock %}

[1coderookie]

Thanks for your answer! I've read the description of course but it seems I probably just don't understand it right.. So does that mean that in the codeblock of your 404.html-reference you quoted I just add my hole 404.html-code instead of the abovementioned line <h1>404 - Not found</h1> to get it work?

[1coderookie]

I just tried it - it (kinda) works! Thank you SO much! Now all the text is displayed in the font I used in that custom 404 though but that's not a big problem as it actually looks kinda funny, so I can live with that I guess.. ;)

[squidfunk]

This was just meant as an example – you can integrate your custom 404 content in the content block.

[1coderookie]

Ok, thanks, I'll keep on trying - but at least right now it's rendered within the theme :)
Thanks again and keep up that great work!