Because even errors should be beautiful.

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:

  1. Create a new file in the root of your site, we'll call it Oops.htm.
  2. 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>
  1. Open your web.config file and locate the line which looks like this:
    <customErrors mode="RemoteOnly" defaultRedirect="Error.htm">
  2. Replace Error.htm with Oops.htm
  3. Save your web.config file.

Don't forget to make this change to your web.config each time you upgrade mojoPortal.

Happy mojo-ing!

View User Profile for Joe Davis Joe is the founder and President of i7MEDIA. His passion is finding creative solutions to complex problems. He is married to Devyn and has three kids; Elijah, Ruth and Hannah. He is a Christian and life-long Boy Scout. When he is not working, he is sleeping. He doesn't sleep much.

Comments

Bill Stork
View User Profile for Bill Stork
Jan 05, 2017
Thanks for this. A client asked me to do this in mojoPortal and I couldn't find it on the mojoPortal.com site.
Sep 12, 2013

Hi Joe,

No, you can't put this in the user.config because it isn't part of the applicationSettings section.

Thanks,
Joe D.

Joe Vago
View User Profile for Joe Vago
Sep 12, 2013

Joe,

do you know if you can put this line in the user.config file so you dont need to update the web.config on every upgrade?

Thanks in advance -- Joe

Comments are closed on this post.