Create Custom Error Pages with @font-face

Date posted: 21st March 2011

Author: script deck

Create Custom Error Pages with @font-face Information:

In this tutorial you will be able to give your website custom error pages with @font-face.

Using .htaccess to redirect a user to custom error pages when coming across a unknown page, a server error or forbidden pages/directorys.

If you already have a .htaccess file at your root directory simply add the below code to your existing .htaccess file, if you dont have one simply create a file called .htaccess at your root directory and add the below code

ErrorDocument 400 /errors/400.html
ErrorDocument 401 /errors/401.html
ErrorDocument 403 /errors/403.html
ErrorDocument 404 /errors/404.html

The below code is what the 404.html page looks like

<body>
<div class="wrapper">
<div class="error_number">404</div>
<div class="error_exp">
<h1>Sorry the Page you are looking for can't be found!</h1>
The page you are looking for may have moved or been deleted,
<a href="/">return home?</a> </div>
</div> </body>
Dowload the zip file, unzip and upload the errors folder and create or update your existing .htaccess file as explained above, you will need to add your full url to the image path in the css file on line 7 and 28 to ensure images display correctly at all levels of your domain and the same for the @font-face file on line 3.

After you have made these changes your css file should look something like this..

@font-face {
   font-family: KOMIKA;
   src: url(http://yourdomain.com/fonts/KOMIKAX_.ttf);
}
body {
   background-image: url(http://yourdomain.com/images/bg_repeat.jpg);
   background-repeat: repeat;
   margin: 0px;
   padding: 0px;
}
.wrapper {
   width: 800px;
   margin-right: auto;
   margin-left: auto;
min-height:542px;
background-image: url(http://yourdomain.com/images/bg_highlight.jpg);
background-repeat: no-repeat;
background-position: center top;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 110px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px; }
After you have made the changes successfully and your images are being shown you can double check by viewing http://yourdomain.com/check/ & http://yourdomain.com/check/check ofcourse replacing the yourdomain.com this will ensure images are being displayed at all levels of your domain.

And thats it your Custom Error Pages with @font-face are complete!

Included in the zip:

400.html, 401.html, 403.html, 404.html , CSS & Font.

Use the below buttons to download or to view a demo of the 404 page.
You can also view the 400, 401, and 403 pages in action.

Supported browsers:


Actions


Share?
Share with your friends on FacebookBookmark to deliciousDigg It!Share & Bookmark on beboShare & Bookmark on technoratiShare & Bookmark on My SpaceShare & Bookmark on StumbleuponShare & Bookmark on Windows LiveShare & Bookmark on GoogleTweet itShare & Bookmark on YahooShare & Bookmark on LinkedinShare & Bookmark on MixxShare & Bookmark on Evernote

Where to go now?

Comments

Some of the best development sites on the web!