How to: Create a BSoD-like 404 page

What’s a Blue Screen of Death?

The Blue Screen of Death (or BSoD) is well known Windows users: Imagine that you are typing something on Microsoft Word, or simply browsing the web. Then, for an unknown reason, Bam! Everything on your desktop disappeared, and all you see is a blue screen, display some error message.
You have to reboot your machine, and you’ll lost all unsaved changes. Cool feature, isn’t?

Why customizing your 404 error page

As I said above, it’s very boring to cclick on a link and just see a page displaying “Error 404 – Not Found”. When they see a 404 error page, most Internet users simply exit the related website. And you just lost a visitor.

So, customizing your 404 page is a very good thing: You can add a link to the homepage, a sitemap, or a way to contact you. This way, the visitor who found the 404 error can still navigate throught your content.
And as I like funny things, we should definitely give a BSoD look and feel to our 404 error page, just like Galiacho did.

How to create a BSoD-like 404 error page

The HTML

Absolutely nothing hard here. Create a new file and call it 404.html. Once you’re done, paste the following code:

<html>
<head>
<title>- ooops! -</title>
<link rel="stylesheet" href="404.css" type="text/css" media="all" />
</head>
<body>
<span class="neg">ERROR 404</span>
<p>
The page is missing or never was written. You can wait and<br />
see if it becomes available again, or you can restart your computer.
</p>
<p>
* Send us an e-mail to notify this and try it later.<br />

* Press CTRL+ALT+DEL to restart your computer. You will<br />
 &nbsp; lose unsaved information in any programs that are running.
</p>
Press any link to continue <blink>_</blink>
<div class="menu">
<a href="index.html">index</a> |
<a href="contact.html">webmaster</a> |
</div>

</body>
</html>

Did you noticied the blink html element? Back at the end of the 90s, during the browser’s war, Netscape introduced this element to indicates that the page author intends the content of the element to alternate between being visible and invisible. This non-standard element isn’t W3C compliant, and doesn’t have support in Internet Explorer.

The CSS

The CSS part is just easy as the html. Create a blank 404.css file, and put the following code inside.

body {
    background:#0000aa;
    color:#ffffff;
    font-family:courier;
    font-size:12pt;
    text-align:center;
    margin:100px;
}

blink {
    color:yellow;
}

.neg {
    background:#fff;
    color:#0000aa;
    padding:2px 8px;
    font-weight:bold;
}

p {
    margin:30px 100px;
    text-align:left;
}

a,a:hover {
    color:inherit;
    font:inherit;
}

.menu {
    text-align:center;
    margin-top:50px;
}

Using a custom 404 error page on Apache server

If you’re using the Apache web server, it’s pretty easy to create your own 404 error page.
Once you uploaded the 404.html and the 404.css files on your server, edit the .htaccess file (If you don’t already have a .htaccess file at your server root directory, create one) and append the following directive:

ErrorDocument 404 /404.html

This code is pretty easy to understand: If a requested file isn’t found by Apache, the visitor will be automatically redirected to your super cool BSoD-like error page.

Using a custom 404 error page within WordPress

If you’re a WordPress user, nothing simplier than creating a custom 404 error page: Browse your theme files, and find the file named 404.php. If this file doesn’t exist, simply create it.
Then, paste the html code on it, and don’t forget to upload the css file as well.

How to: Create a BSoD-like 404 page

What’s a Blue Screen of Death?

Why customizing your 404 error page

The HTML

The CSS

Using a custom 404 error page on Apache server

Using a custom 404 error page within WordPress

Related Posts

13 Comments

2 Trackbacks

Post a Comment

Blogroll

About CatsWhoCode

From CatsWhoBlog

From WpRecipes