Own 404 page - css not loading?

Hi all,
sorry, perhaps simple to solve but can’t find a solution in the net.
Built a individual 404 page. shows correct when using the address.

https://www.seminarhaus-deinsdorf.de/fehler/index.html

When testing the 404 it shows (without loading css?) like this

Hosting is with Ionos, the htaccess file I uploaded contains :

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule (.*) https://www.%{HTTP_HOST}/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L]
ErrorDocument 404 /fehler/index.html

How can I solve this?
Thanks a lot in advance

Depends on the theme you use, and how it’s including the CSS. I experienced the same issue in the past also.

Thanks Jannis - I am using Source…
perhaps @habitualshaker knows something about it?

I do this, and it always works.
First thing in the htaccess file I insert this code
ErrorDocument 404 /404.html

there are 2 pages:

  • in one page you create page 404
    title browser: 404 You are lost
    folder: /
    filename: 404redirected.html

here you make your 404 page inserting as many stacks as you want

  • then you create another one, this must be an Offsite Page
    Browser Title: The Real 404
    Folder: /
    Filename: 404.html
    in offsite options enter URL i.e. the real address of the 404redirected.html page, in your case
    https://www.seminarhaus-deinsdorf.de/404redirected.html

If I explained myself badly, tell me and I’ll make you some screenshots

2 Likes

A quick thing to try would be to use the full url of your 404 page, so:

ErrorDocument 404 https://www.seminarhaus-deinsdorf.de/fehler/index.html

2 Likes

Thanks Stuart - that did it!

1 Like

Unfortunately both examples given above are no SEO conform 404 pages. Why? Because the http error code won’t be 404, but 200. With this, Google won’t be able to see that the given URL is wrong.

you are absolutely right it is a 200, however there are many advantages to having a custom 404 page for website set up like this:

  • helps visitors find their way: by including a series of links to the most popular pages of your site or inserting a site search and helps the visitor who is “lost” to continue browsing the site.

Also the fact that a “friendly” and fun 404 page will be able to help prevent the visitor from leaving your site permanently

You’re correct. Just stating the fact that, the way how RW is building the paths to the CSS file includes will break the display for a standard (customized) 404 page for most of the themes.

You could perhaps manually set up absolute links on that page to reference the page css/js. e.g. add the following to the <head> code section in that page’s RW’s page settings.

<link rel="stylesheet" type="text/css" href="https://www.seminarhaus-deinsdorf.de/fehler/files/stacks_page_page12.css">
<script src="https://www.seminarhaus-deinsdorf.de/fehler/files/stacks_page_page12.js"></script>

and revert to ErrorDocument 404 /fehler/index.html

1 Like

in this way, creating two pages, it always works because the 404 page redirects to the custom 404 page with its css and stacks.
You will never have any problems.