When encountering an error on a mojoPortal site, the error.htm file is display which is a very plain page simply stating that something went wrong.
Now, it gets the job done but it's kinda plain so we revamped it on our site:
Is it better? Well, it's still an error message but at least it has some character. :-)
It's actually quite simple to accomplish as well:
- Create a new file in the root of your site, we'll call it Oops.htm.
- Add the following to it:
<!DOCTYPE HTML>
<html>
<head>
<title>Error</title>
<link href='//fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<style>
html,
body {
width: 100%;
height: 100%;
}
body {
background: #f2f5f6; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMmY1ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzNyUiIHN0b3AtY29sb3I9IiNlM2VhZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzhkN2RjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
background: -moz-radial-gradient(center, ellipse cover, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
background: -ms-radial-gradient(center, ellipse cover, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
background: -o-radial-gradient(center, ellipse cover, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 12+ */
background: radial-gradient(ellipse at center, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
display: table;
}
div.wrap {
display: table-cell;
vertical-align: middle;
}
div.inner {
margin: 0 auto;
width: 50%;
}
h1 {
font-size: 40px;
font-family: 'Architects Daughter', cursive;
margin-top: 0;
text-align: center;
}
p {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<h1>
Ouch! That Hurt!
</h1>
<p>
So sorry for the inconvenience but an error has occurred while trying to process your request.
</p>
<p>
The error has been logged and will be reviewed by our staff as soon as possible. It's possible the error was a momentary hiccup and you may wish to use the back button to try your request again, or you can to the <a href="default.aspx">home page</a>.
</p>
</div>
</div>
</body>
</html>
- Open your web.config file and locate the line which looks like this:
<customErrors mode="RemoteOnly" defaultRedirect="Error.htm">
- Replace Error.htm with Oops.htm
- Save your web.config file.
Don't forget to make this change to your web.config each time you upgrade mojoPortal.
Happy mojo-ing!