Service Header HTML Code Sample
From LongJump Support Wiki
The Header HTML code will appears at the top of the Login/Logout pages. Custom information, such as Login/logout scripts, can be added in the body of the page.
See also: Service Footer HTML Code Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Service Provider - Login</title>
<style>
/* Standard tag redefinitions */
body{color:#555;background:#B8B8B8;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.4em;margin:0;padding:0;}
p{margin:0 0 20px;}
a{text-decoration:none;color:#0072bc;font-weight:400;}
a:hover{text-decoration:underline;color:#0072bc;}
h2{font-size:18px;font-weight:700;color:#1469B3;margin:10px 0 0;padding:0;}
h3{font-size:16px;font-weight:700;color:#1469B3;margin:15px 0 0;padding:0;}
h4{font-size:14px;font-weight:700;color:#1469B3;margin:15px 0 0;padding:0;}
input{font-size:11px;font-weight:700;color:#444;background-color:#CCC;}
.page-top{width:1045px;margin:0 auto;}
.center{margin:0 auto;}
.normal{font-size:12px;}
.small{font-size:11px;}
.right{float:right;}
img.right{margin:0 0 5px 10px;}
.left{float:left;}
img.left{margin:0 10px 5px 0;}
.MainNav{width:1004px;height:26px;background:url(https://www.myserviceproviderdomain.com/images/layout/topnav_line.gif) no-repeat bottom;margin:0 16px;padding:0 0 5px 9px;}
.MainNav a.login{float:right;width:60px;}
.header-text{color:#1469b3;font-size:18px;padding:11px 18px 0 0;}
.header-text p.nav{color:#555;font-size:12px;margin:0 -3px 20px 0;}
.header-text .nav a{margin:0 3px;}
.header-text .nav a:hover{text-decoration:underline;}
table.sitemap-feature{
width:1020px;
color:#555;
background:url(https://www.myserviceproviderdomain.com/images/layout/bg_sitemap.jpg) no-repeat 0px 0px;
padding-left: 10px;
margin-left: 10px;
}
.sitemap-feature p{line-height:1.2em;margin:3px 0 0;}
.sitemap-feature .copyright{color:#818181;}
.sitemap-feature th{background:#FFF;font-weight:400;padding:12px 14px 10px 18px;}
.sitemap-feature td{padding:12px 14px 10px 18px;}
.sitemap-feature td strong,.sitemap-feature td b{font-size:13px;}
.sitemap-feature a{text-decoration:none;color:#555;}
.sitemap-feature a:hover{text-decoration:none;color:#0066b0;}
.h10px{height:10px;font-size:1px;}
.Ttop a:hover{font-family:Arial, Helvetica, sans-serif;font-size:9px;text-decoration:underline;text-align:right;color:#0876be;}
.compare_descrip{color:#444;line-height:16px;text-decoration:none;font-family:Arial;font-size:12px;padding:0 3px;}
.compare_head{color:#0066b0;line-height:18px;font-weight:700;font-family:Arial;font-size:14px;margin:0;padding:0 3px;}
.compare_descrip a{font:12px Arial;color:#0066b0;line-height:16px;text-decoration:none;font-weight:700;}
.compare_descrip a:hover{color:#0066b0;line-height:16px;text-decoration:none;font-weight:700;font-family:Arial;font-size:12px;}
.blue_field_head{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:700;color:#92BC50;letter-spacing:5pt;text-align:center;line-height:3px;margin:0;padding:0 0 24px;}
.doc_link{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#0072BC;margin:0;padding:0;}
.doc_link a{text-decoration:none;color:#0072BC;}
.doc_link a:hover{text-decoration:underline;color:#0072BC;}
.header-title{background:url(https://www.myserviceproviderdomain.com/images/layout/bg_header_title.gif) no-repeat 26px 0;}
.header-title h1{font-size:27px;line-height:1em;font-weight:700;color:#FFF;margin:8px 0 0 46px;padding:0;}
.DetailHeader{height:28px;}
.HeaderTitleLabel a:link,a:active{text-decoration:none;color:#1469b3;}
.HeaderTitleLabel a:visited,a.hover{text-decoration:underline;color:#1469b3;}
.CustomizeHeaderTitleLabel a:link,a:active{text-decoration:none;color:#1469b3;}
.CustomizeHeaderTitleLabel a:visited,a.hover{text-decoration:underline;color:#1469b3;}
.CustomizeHeaderTitleLabel{padding-left:10px;font-size:12px;font-weight:bolder;padding-right:4px;}
.HeaderTitleLabel{padding-left:10px;font-size:16px;font-weight:bolder;padding-right:14px;color:#FFF;}
.HeaderTitle{font-size:12px;color:#fff;font-weight:700;}
.MidColor{background-color:#8CC641;}
.LightColor{background-color:#B9C9E6;}
.DarkColor{background-color:#404697;}
.DarkColorBorder{border-top:solid 2px #377a97;}
.inputForm{font-size:14px;}
.inputFormDisabled{font-size:12px;font-weight:Normal;color:silver;}
.inputFormReadOnly{font-size:12px;font-weight:Normal;background:#fff;border:0;padding:1px 1px 1px 2px;}
.DarkText{font-size:12px;color:#000;font-weight:700;padding-top:2px;padding-bottom:2px;}
a.textLink{font-size:12px;font-weight:NORMAL;color:#000;padding-right:4px;text-decoration:underline;cursor:pointer;}
a.textLink:hover{font-size:12px;font-weight:NORMAL;color:#F93;text-decoration:underline;cursor:pointer;}
.compare_td_head,compare_td_head TH{font:12px Arial;color:#fff;line-height:16px;font-weight:700;bgcolor:#CCC;padding:0 3px;}
.SectionBar,.FormSection{padding-left:5px;font-weight:700;font-size:12px;color:#005477;height:20px;text-valign:middle;background-color:#e3e7f2;border-top:solid 4px #377a97;border-bottom:solid 2px #6f8db9;cursor:hand;}
a.textLink:active,a.textLink:visited{font-size:12px;font-weight:NORMAL;color:#000;text-decoration:underline;cursor:hand;}
#Side{width:232px;padding:0 0 0 17px;}
#Main{width:764px;padding:0 0 0 10px;}
#Side p{margin:10px 0 0;}
.left-menu{width:218px;background:#E7EAEC url(https://www.myserviceproviderdomain.com/images/layout/leftnav_body.gif) repeat-y;margin:0 auto;}
.left-menu .header{background:url(https://www.myserviceproviderdomain.com/images/layout/leftnav_head.gif) no-repeat;padding:9px 0 0;}
.left-menu .footer{background:url(https://www.myserviceproviderdomain.com/images/layout/leftnav_footer.gif) no-repeat bottom;padding:0 0 7px;}
.menu-list,.menu-list ul,.menu-list li{list-style:none none;margin:0;padding:0;}
.menu-list li{border-bottom:1px solid #B2B0B0;font-size:14px;font-weight:700;padding:6px 0;}
.menu-list li.active-item{background:url(https://www.myserviceproviderdomain.com/images/bullet_leftactive.gif) no-repeat 17px 10px;}
.menu-list li a{color:#0f63b0;margin:0 0 0 34px;}
.menu-list ul{border-top:1px solid #B2B0B0;margin:9px 0 0;padding:7px 0 0;}
.menu-list ul li{border-bottom:none;font-size:12px;font-weight:400;padding:2px 0 2px 6px;}
.menu-list ul li.active-item a{color:#0f63b0;}
.menu-list ul a{color:#555;}
#Main ul{list-style:url(https://www.myserviceproviderdomain.com/images/bullet_point.gif);margin:20px 0 20px 20px;padding:0;}
#Main li{margin:0;padding:0 0 0 5px;}
.content-td{font:12px Arial;color:#444;line-height:18px;}
#mainnav{list-style:none;line-height:20px;margin:0;padding:0;}
#mainnav *{z-index:999;}
#mainnav li{float:left;height:26px;position:relative;background:url(https://www.myserviceproviderdomain.com/images/layout/bg_mainnav_tab.gif) no-repeat left;margin:0;padding:0 0 0 22px;}
#mainnav a{float:left;height:21px;background:url(https://www.myserviceproviderdomain.com/images/layout/bg_mainnav_tab2.gif) no-repeat right;color:#FFF;line-height:16px;margin:0;padding:5px 25px 0 0;}
#mainnav a:hover{color:#cae9fd;}
#mainnav .shadow{display:none;position:absolute;left:4px;top:30px;width:150px;background:url(https://www.myserviceproviderdomain.com/images/layout/shadow.png) no-repeat bottom right;padding:0 4px 0 0;}
#mainnav ul{float:left;width:160px;position:relative;left:-3px;top:-4px;background:#2285dc;font-size:12px;margin:0;padding:3px 3px 2px;}
#mainnav ul a:hover{color:#5cbdfa;}
#mainnav ul li{list-style:none none;background:#FFF;border-bottom:1px solid #0f63b0;float:left;width:160px;padding:0;}
#mainnav li:hover .shadow,#mainnav li.over .shadow{display:block;}
#mainnav li li a{float:left;width:140px;height:23px;background-image:none;color:#0f63b0;padding:5px 15px 3px;}
#mainnav li.active li a{background-image:none;}
table.compare_feature{border-spacing:0;border-collapse:separate;margin-right:20px;margin-left:20px;border-color:#FFF;border-style:none;border-width:0;padding:0;}
table.compare_feature th{border-bottom-width:3px;border-bottom-style:solid;border-bottom-color:#8cc540;background-color:#0066b0;padding:5px;}
table.compare_feature td{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#fff;background-color:#f3f3f3;padding:5px;}
table.compare_feature td .high{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#fff;background-color:#8cc540;padding:5px;}
form,.header-text p,form,.header-text p{margin:0;}
.black,.menu-list a:hover,.menu-list ul li a:hover,.menu-list a:hover,.menu-list ul li a:hover,.black{color:#000;}
* html #mainnav .shadow,.menu-list ul li.active-item,.menu-list ul li.active-item,* html #mainnav .shadow{background:none;}
#mainnav ul li.last,.menu-list li.last,.menu-list li.last,#mainnav ul li.last{border-bottom:none;}
.Ttop,.Ttop a,.Ttop,.Ttop a{font-family:Arial, Helvetica, sans-serif;font-size:9px;text-decoration:none;text-align:right;color:#0876be;}
.content-p a,.content-td a{color:#0071BC;text-decoration:none;font-weight:700;}
.content-p a:hover,.content-td a:hover{color:#0071BC;text-decoration:underline;font-weight:700;}
</style>
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("mainnav");
if(navRoot){
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {this.className+=" over";}
node.onmouseout=function() {this.className=this.className.replace(" over", "");}
}}}}
}
window.onload=startList;
//-->
</script>
</head>
<body>
<div class="page-top">
<table width="1045" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%"><a href="https://www.myserviceproviderdomain.com"><img src="https://www.myserviceproviderdomain.com/images/layout/logo.gif" alt="Service Provider Tagline" width="170" height="100" border="0" /></a></td>
<td width="78%" align="right" valign="top" class="header-text">
<p class="nav"> </p>
<p>On-Demand Enterprise Applications Platform<br />
<span class="normal">Sales: 000.000.0000</span></p></td>
</tr>
</table></td>
</tr>
<tr>
</tr>
<tr>
<td height="53" valign="top" class="header-title"></td>
</tr>
<tr>
<td valign="top">
<table align="center">
<tr><td>