Service Header HTML Code Sample

From AgileApps Support Wiki
Revision as of 01:31, 19 February 2009 by imported>Evelyn
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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>