In pursuit of the optimal user experience, I usually want to control each aspect of a view. And as there is much more to a good site than a nice colour palette or a funky header image, my interference with an extension’s existing layout goes beyond the scope of CSS alterations. I like to meddle with my site’s views by customizing any output that is generated and that includes Joomla!’s error page.

We all put enormous effort into designing websites that stand out from the crowd, and yet we often overlook the opportunity that the error page hands us. The error page has huge potential. Not only does a well-styled error page tell your visitors that you have an eye for detail, it can also convey a message or enforce an impression. At that, Joomla’s error message is shockingly simple to adapt. Here’s how…

Joomla!'s default error message

The file that renders the error message is located in your templates folder, in a folder named ‘system’. The file is appropriately named ‘error.php’. You need to make a copy of this file and save it into your template’s folder. For this example I have duplicated the Rhuk Milkyway template to which I will be adding the custom error page.

Remember to assign your template from the administrator!

Never alter a default template, whether it’s one of Joomla!’s core templates or an other third party’s template. Always create a copy of the template first and make your alterations to the copy. This way you will never lose your changes after an update.

This is what your error page looks like now:

Design your new error page

Now this is where the fun begins. If you googled for – say – “cool error pages” you would retrieve an enormous amount of funny, cool, beautiful and even very useful error pages. I have even seen error pages that sponsor charity. The only limits are the bounds of your own creativity. One word of caution though: the idea is to not scare your visitors away. Also, always provide a link to either a homepage, a search page or some other page so your users can find their way back to your site’s content.

For this example, I have prepared a little design featuring a hungry hippo (see image above). Now it's time to put some HTML in place. There's a number of ways in which you could build this design. I have taken the easy road and cut the design up in two images, one for the background and one that will serve as the link back to the homepage. I have saved the images in my template's image folder. Have you looked at the HTML of the default error page yet? Not much in there hey? This is what my new, customized HTML looks like:

See how little PHP code is in there? It's all copy/pasted from the original error.php (in /template/system) so really there's nothing to fear. Although we don't need it for the public view I have also kept some debug info, just in case. Now all that’s left is to put some CSS styling in place.

Add some CSS

It’s up to you how to implement your stylesheet. If your error page re-uses some of your template’s styling, you may want to include a link to that stylesheet. You can even copy the stylesheet from the system folder, which ever serves you better. For this example I have create a file called ‘error.css’ in my template’s css folder and added the following code:

* {
 font-family: helvetica, arial, sans-serif;
 font-weight: normal;
 font-size: 1em;
 color: #000;
}

html {
 height: 100%;
 margin-bottom: 1px;
}

body {
 margin: 0px;
 padding: 0px;
 height: 100%;
 background: #f6ac1e;
}

#outline {
 width: 911px;
 padding-top: 230px;
 background: url(../images/error_hungryhippo.gif) no-repeat 0 50px;
}

#errorboxoutline {
 margin: 0px;
 padding: 0px;
}

#errorboxbody {
 text-align: left;
 height: 250px;
 position: relative;
}

#errorsafelink {
 float: right;
 position: absolute;
 right: 0;
 bottom: 0;
}

#errorsafelink a {
 float: left;
}

#errorsafelink img {
 border: 0;
}

#techinfo {
 margin: 10px;
 padding: 10px;
 text-align: left;
 border: 1px solid #CCCCCC;
 color: #CCCCCC;
}

#techinfo pre {
 color: #CCCCCC;
}

Triggering the error page

Now of course your website runs fab, and it never renders an error (yeah, sure). But since we want to see the error page in all it fabulous glory, you will have to feed your browser a url that will trigger an error. I simpy called a non-existing component, here’s the url that worked for me:

http://localhost/index.php?option=com_hungryhippo

And there you have it, your very own customized error page. See how easy that was? Really, now you don't have a single excuse left as to why you are still serving that boring default error page. And neither have I...

Feeling lazy? Download the code from this example, links are available at the bottom of the article. Need some more inspiration? Try some of these pages, their loaded with cool 404 designs:

• http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/
• http://www.smashingmagazine.com/2009/01/29/404-error-pages-one-more-time/
• http://sixrevisions.com/design-showcase-inspiration/beautiful-and-useful-404-error-pages-for-inspiration/