HTML Website Block Message

Hello,

I'm testing out a new Watchguard XTM 505 with Fireware XTM Pro v11.2.1 and I've got it almost completely configured and running properly except for a few things. It comes with a content filter called WebBlocker which runs on an HTTP proxy policy set on the firewall. Now the default deny message when a website is blocked looks god awful, but is written in HTML and is fully customizable.

I suck at web design so I am looking for similar "access denied", "website blocked", etc. web pages in HTML to get ideas from. Or if anyone else has made a custom deny message in a Watchguard device would like to share it, that would be great. Just looking for a little help making this portion of Watchguard as appealing to the eye as their website.

Thanks
LVL 2
Kyle LambertIT ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Hi Ar3s,
Your best approach would be looking for images instead of actual pages since this type of page isn't that popular while searching google for "Access Denied" "Page Denied" etc.. might turn out with some nice results.

Then later you can ask someone to mock up the html for you, it shouldn't be a massive job, if it wasn't too complex you could even get some help with it here on EE

You also need to check what features Watchguard would support, whether a full html page, just inline tags without body, external style sheet, inline styles, etc..

I've mocked up a quick one for you which you can try, this example uses online images so in case you like them just save a copy and modify the URL, I can do this for you if you like

Hope this helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Access Denied</title>
    <style type="text/css">
        html, body {height:100%;margin:0;font:normal 14px Arial, Helvetica, Serif;color:#666;}
    </style>
</head>
<body style="background:url(http://www.mlcsmith.com/graphics/mine/assets/skyscraper_dark.gif);">
    <div style="padding:100px;width:50%;margin:0 auto;text-align:center;">
        <div style="border:solid 10px #990000;background:#fff;padding:20px;">
            <p><img src="https://tamis.army.mil/logon/ako/images/accessDenied.gif" width="200" /></p>
            <h1 style="font:bold 28px Tahoma, Arial, Helvetica, Serif;">Access Denied</h1>
            <p style="border-bottom:dashed 1px #333;font-weight:bold;padding-bottom:20px;">
                This site was blocked message
            </p>
            <div style="text-align:left;">
            <p>
                Logged Attempt for prohibited access
            </p>
            <p>
                <b>Name:</b> User
                <br />
                <b>Date:</b> Date
                <br />
                <b>URL:</b> http://www.url.com
            </p>
            </div>
        </div>
    </div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kyle LambertIT ManagerAuthor Commented:
Yeah I spent most of yesterday looking up ideas and ended up making a simple page in Dreamweaver using one of their basic templates. It turned out pretty similar to what you posted.

WatchGuard only tells me that I can use "standard HTML" for the deny message. And they have like 3-4 variables that the box uses to display data.

Thanks for the help and if anyone else has some mock deny pages, please post them to give more ideas.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #666;
}
.oneColLiqCtrHdr #container {
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColLiqCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}
.oneColLiqCtrHdr #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
} 
.oneColLiqCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.oneColLiqCtrHdr #container #header h1 {
	font-family: Arial, Helvetica, sans-serif;
}
-->
</style></head>

<body class="oneColLiqCtrHdr">
<p>&nbsp;</p>
<div id="container">
  <div id="header">
    <h1 align="center">Web Filter</h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <p>&nbsp;</p>
    <table width="128" border="0" align="center">
      <tr>
        <td><img src="http://www.oceancold.com/images/stop_1.png" width="256" height="256" align="middle" /></td>
      </tr>
    </table>
<p>&nbsp;</p>
    <h3 align="center">This web page was blocked.</h3>
    <div align="center">
  <table width="350" border="1">
		    <tr>
		      <td width="80"><b>Host:</b></td>
		      <td>%(url-host)%</td>
	        </tr>
		    <tr>
		      <td width="80"><b>Path:</b></td>
		      <td>%(url-path)%</td>
	        </tr>
	      </table>
    	  <p><br>
      </p>
    </div>
  <!-- end #mainContent --></div>
  <div id="footer">
    <p>Please contact the network administrator if you need access to the   denied location. </p>
  <!-- end #footer --></div>
<!-- end #container --></div>
	<p>&nbsp;</p>
</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.