The Joomla! Community Magazine™

Customizing Joomla!'s Error Page

Written by | Friday, 01 October 2010 00:00 | Published in 2010 October
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:

joomla_default_404_page

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:

HTML for the customized Joomla! error page

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


joomla_custom_404_page

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:

Read 79111 times

Download attachments:

Tagged under Did you know...?
Babs Gösgens

Babs Gösgens

Babs first started using Joomla! in 2006. Immediately enthused, Babs started exploring Joomla! and its API. Since, she’s become an avid believer in Joomla's limitless potential and an active member of the international Joomla! Community. Babs has joined the Joomla! Community Magazine as co-author for “Did you know...?” to Nick Antimisiaris and as a member of the Media Team and the Promotions Team.

Babs Gösgens has been a professional web designer since 1995. She has a profound knowledge of interface design and usability and is uniquely talented in both design and development.

avatar
Babs! Great article - Team EaSE is proud that you are now working on our Team!
VOTES:1
avatar
Thank you Hils, an let me say it is me who is proud to be on Team EaSE.
VOTES:0
avatar
Nice job. Thank you very much for your information.
VOTES:0
avatar
Thank you Ugur! There's also some excellent information on Joomla!'s documention wiki: docs.joomla.org/Custom_error_pages
VOTES:2
avatar
Nice article! We wrote the quick non-standards-compliant custom 404 page at the Joomla! documentation wiki, but chose to use the 'proper' method for a new (funny?) 404 page here at CartaNova.
VOTES:0
avatar
Thank you for sharing your 404 page, I think it's great!
VOTES:1
avatar
Excellent, useful article Babs, and beautifully presented. Thank you!
VOTES:0
avatar
Thank you Alice, and also thank you and Robert for bringing us JoomStew each week!
VOTES:0
avatar
To avoid comming on an error page I use Dynamic404 from Yireo. Plus I also customized the 404 of our website.
Visit www.2value.nl/waterfiets to see the shattered logo indicating you're on an error page.
VOTES:0
avatar
Had just spent about 2 days looking for something like this had to cobble one from from information I was finding across the web take a look: here it needs more work but your article will be a great help.
VOTES:0
avatar
Nice one, thanks for sharing :)
VOTES:0
avatar
Very usefull information. Thank you!
VOTES:0
avatar
I'm glad you liked it, thank you.
VOTES:0
avatar
RT...
alice.grevet wrote:
Excellent, useful article Babs, and beautifully presented. Thank you!
We do this in error.php
 
VOTES:0
avatar
I've had a lot of fun with this today but I am curious as to why this method is superior to another method found in the docs ... docs.joomla.org/Tutorial:Create_a_Custom_404_Error_Page ... just what the benefits and drawbacks are to both methods so I can decide which to use. Still working on what the final error pages will look like but here's what I've got so far ... gworldz.zapto.org/index.php?option=com_hungryhippo
VOTES:0
avatar
I've been having alot of fun with this article thanks for sharing but I was wondering what makes this method better than this one and what the pro's and con's of each method are.

So far using your method here is what my error pages look like.
VOTES:0
avatar
There's always different methods to accomplish similar things, that's part of what makes web development do much fun.

Is this solution better than the one suggested? Maybe, maybe not. It depends largely on what you are trying to achieve. The wiki page that you are referring to is offering a solution that enables you to incorporate your Joomla! template (menu's and models and all) into your error page, thus giving you full benefit of the framework. Have you taken the time to read the trailing forum discussion (here) between Arno and Amy? It'll provide plenty of arguments for either case. Interesting read indeed!

My personal preference goes towards the error.php solution (like the one I described). I am perfectly happy with the page not implementing the framework. If you wanted to implement Joomla! modules, the menu for instance, you could use the method that Arno describes in the post mentioned before.

If you want to make sure you've covered all angles, be sure to give Hans' solution a go, too (see comment above). Let us know what you've decided, I for one would love to know.
VOTES:1
avatar
I had read that thread in the past and am thankful you were able to locate and share it me again, it was that thread that made me give up on custom error pages lol

I have chosen to blend most of the methods and hope it is standards compliant o.O

Here's my error page now, and here's the process that created it ...

1. Copy error.php from system to template folder.
2. Made me a nifty little catch all error page as described in this article.
3. Then I made 9 (public & published) articles titled Error 400-405, 410, 500 and 503 (probably didn't need most of them o.O) in Uncategorised Section and Category.
4. Set Search - Content plugin to ignore Uncategorised articles.
5. Created Error Pages menu (with no module) and added Error Pages top level menu item (unpublished) and 9 (published) menu items under it to match my Error Page articles.
6. Used a modified version of guywithcables solution, adding ...
[url=http://http://static.ow.ly/photos/original/4u9z.png]
[/url]
... just below the restricted access line to the error.php file I created with your tutorial (click image to enlarge). Then closed out the else statement at the bottom of the file ...

... just after the closing html tag.
7. Added "loadposition error_search" in curly brackets as described here.
8. Installed Component Loader module and published it to error_search and configured it to display com_search.

This is by no means the easy way to go about doing it though and seems overly complicated now that I've seen it all typed out o.O but that's the entire method I ended up using. The end result can be viewed here but I have no idea if its standards compliant or how to check it to see if it is. I have read so many opinions about how to *properly* do error pages in Joomla! since reading your article that I have no idea if it really matters or not anymore. I believe in all honesty I would recommend the method described in the article to the majority of my clients but will use what I described above for my personal sites.

Please let me know how bad this way of doing it is lol
VOTES:0
avatar
9. [url=]Additional Steps toward a Better Custom 404 Error Page[/url] from the wiki adding my 9 Disallow: article url's to the robots.txt file.
VOTES:0
avatar
I broke the comments component by trying to wrap images with url's so here #6 again ...

6. Used a modified version of guywithcables solution, adding ...

Fullsize Image Here
... just below the restricted access line to the error.php file I created with your tutorial (click image to enlarge). Then closed out the else statement at the bottom of the file ...

... just after the closing html tag.

Hopefully that fixes all the broken stuff o.O sorry about that :(
VOTES:0
avatar
Andrew J. Holden Monday, 11 October 2010
Hi Doc Eddie,

I wrote that 404 documentation in the wiki. The menu-linking method is the 'quick and dirty' way - it works, and it is relatively easy to do.

However, the method described in the article here if much more standards-compliant. For example, the right error code(s) (404) would be passed along correctly to web stats services like Google Analytics, using this method.

On balance, if you can use the method described here, I think it's the better way to go. But if you're new to web design and need something quick, or *really* want to incorporate your full template, than the first method may be preferable.
VOTES:0
avatar
glad to see it , sounds good and impressive , the thing is very useful for 404 pages upon my experience.

i had seen lots of tweaks but found it very effective.
VOTES:0
avatar
The wiki was helpful Andrew but I think that perhaps mentioning ...
Andrew J. Holden wrote:
The menu-linking method is the 'quick and dirty' way - it works, and it is relatively easy to do.

However, the method described in the article here if much more standards-compliant.
... in the wiki article would prove helpful to those finding it later. Other than that I am truly grateful for that wiki post sending me down the path of discovering options for Joomla! error pages.

I would appreciate your opinions of the method I ended using (posted above) also if there is anything I should reconsider either publicly or privately admin@ the website url of this post.
VOTES:0
avatar
Thanks for the great article! =D

However I'm a little confused, I have just read the conversation between arno-amy however, I don't understand what wrong with the way used above? =O
VOTES:0
avatar
The way Babs shows us above is the most accepted and least complicated ... probably the best way to do it actually.

The thread with Arno and Amy is more or less an educational read, and if all the bickering and confusion didn't convince you to stay with a standards compliant error page (what Babs shows us) then there are a bunch of alternatives in that thread you an try to piece together.

Doing error pages any other way is just plain aggravating and unless a client ask for it specifically I would offer them Babs solution. As I understand it there is absolutely nothing wrong with the way Babs has done it but the other alternatives all fall short in one way or another.
andy smith wrote:
Thanks for the great article! =D

However I'm a little confused, I have just read the conversation between arno-amy however, I don't understand what wrong with the way used above? =O
VOTES:0
avatar
Hi Andy,
Like Andrew said, creating the error page as described in this article is more standards-compliant, and there is nothing wrong with it.

The conversation between Amy and Arno (and others) was (among other things) about including more of Joomla!'s framework in the error page so you can re-use elements like modules (navigation for example). One proposed solution was to redirect the error page to a Joomla! article that looks like an error page. Because this page is served through the framework with a 'normal' template, you can include your site's modules.

I hop that answers your question.
VOTES:0
avatar
Hi Babs,
thats great thanks for clearing that up, I'd personaly prefer to have the error page appear seperately form my site, so its great to hear it is standards compliant... However again, from that converstion mentioned, there was a suggestion to add additional code to tell a search engine its a 404 page, how would a search engine handle the page with the error.php provided by yourself?
VOTES:0
avatar
Using Babs method the correct headers are served to the browser, you can use something like HttpFox to check if you want.

So far all of the other methods I have seen posted, even in that Arno-Amy thread have problems, you literally have to grab bits and pieces of every solution posted and I still don't think its acceptable or standards compliant. I would love to post the full process (what I posted up there is missing about 4 other steps now o.O) just to have it critiqued and find out exactly how bad it is to do it that way.
VOTES:0
avatar
How to Load change your "Language module" into error page. Most of time, visitors hit back button after changing their language and click a link from other language which might not have its translation in the new selected language. This lead to an error Page.
VOTES:0

Language Switcher

Grab the Joomla! Community Banners! Spread the word!

Recommend us on Google+