Table of Contents

Header and Footer

Customising header and footer require creation these custom files located under common folder.

common/htmlheader.html

htmlheader.html contains non-visible area of the header. It includes the document type declaration, the title of the page, any stylesheet and javascript for menu declaration.

Example file (assuming the folder name for custom interface is interface_custom) 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MyCompany<txt name="title_message"></txt></title>
<script type="text/javascript" src="/intranet/js/mtools.js"></script>
<script type="text/javascript" src="/intranet/js/cla_lib.js"></script>
<link rel="search" type="application/opensearchdescription+xml" title="Claromentis" href="/intranet/common/clarosearch.php" />
 
<!-- fav icon can be customised here -->
<link rel="shortcut icon" href="/images/default/icons/favicon.ico" type="image/x-icon" />
 
<meta http-equiv="Content-Type" content="text/html; charset={charset}" name="htmlheader:meta_ctype">
<base name="base_tag" visible="0">
<include file="style.html">
 
<!-- Small javascript to clear search form on focus -->
 
<script type="text/javascript">
	function clearText(thefield){
	if (thefield.defaultValue==thefield.value)
	thefield.value = ""
	}
</script>
 
<!-- Declaration below is required for CSS based drop down menu -->
 
<link href="/interface_custom/css/MenuHor.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="/interface_custom/css/MenuHorIE6.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/interface_custom/js/ClaMenu.js"></script>
<![endif]-->
 
 
</head>
<body>

common/style.html

style.html contains style declaration required to load style on the default VI as well as custom VI Example file (assuming the folder name for custom interface is interface_custom) 

 
<!-- Default Stylesheet declaration -->
<link rel="stylesheet" type="text/css" href="/interface_default/common/common.css" media="all" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="/interface_default/common/common_ie.css" media="all"/><![endif]-->
<link rel="stylesheet" type="text/css" href="/interface_default/common/style.css" media="all" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="/interface_default/common/style_ie.css" media="all"  /><![endif]-->
 
<!-- Custom Stylesheet declaration -->
<link rel="stylesheet" type="text/css" href="/interface_custom/common/common.css" media="all" />
<link rel="stylesheet" type="text/css" href="/interface_custom/common/style.css" media="all" />
 
<!-- Alternate Stylesheet functionality, using styleswitcher.js  -->
<link rel="alternate stylesheet" type="text/css" href="/interface_default/common/style_large.css"      media="all" title="Large" label="large"/>
<link rel="stylesheet" type="text/css"                                                                 media="all" title="Fixed" label="fixed"/>
<link rel="alternate stylesheet" type="text/css" href="/interface_custom/common/print.css" 	       media="all" title="Print" label="print"/>
<link rel="alternate stylesheet" type="text/css" href="/interface_default/common/style_large.css"      media="all" title="Print" label="print"/>
 
<!-- Special Stylesheet for print media -->
<link rel="stylesheet" type="text/css" href="/interface_custom/common/print.css" media="print" />
Pay attention to the ordering of stylesheet links

common.css

common.css contains CSS classes and ids which control general typeface used for the entire Claromentis system. typicaly this file hosts CSS value for p, h1, h2, h3, h4, h5

/interface_default/common/common.css

Containing generic typeface on the default VI

/interface_default/common/common_ie.css

Special stylesheet to fix IE problems

/interface_{custom}/common/common.css

Containing selected typeface stylesheet for interface_{custom} to overrule value set on the default VI.

Example content 

 
body {font-family: Arial,Helvetica,sans-serif;}
#sidebar .infobox a {font-size: 11px;}
 
a {text-decoration:none; outline:0;}
a:link { color:#1D368A; }
a:visited { color:#1D368A; }
a:hover { text-decoration:underline;  color:#1D368A; }
/* removing border on image hyperlink */
a img { border: 0px; }
 
/* required to neutralise spacing */
p, div, li, table, td, th, tr, pre { margin: 0; padding: 0; }
 
select, input, textarea { vertical-align: middle; font-size:11px!important;
		font-family: Arial,Helvetica,sans-serif !important;
}
 
h1, h2, h3 {font-family: Arial, Verdana, sans-serif;}
h1 {font-size: 28px; color:#0048A0;}
h2 {font-size: 18px; color:#000066;}
h3 {font-size: 16px; color: #999999;}
h4 {font-size: 12px;}
h5 {font-size: 11px; color: #969696;}

style.css

style.css contains design elements including positioning and custom typeface. Header, footer and infobar CSS properties are commonly controlled by this files.

/interface_default/common/style.css - common typeface stylesheet on the default VI

/interface_default/common/style.css

Containing design elements required for the default VI but it is necessary to call on the custom VI because not all elements are defined on the custom style.css

/interface_default/common/style_ie.css

Special stylesheet to fix IE problems

/interface_{custom}/common/style.css

Custom stylesheet containing design elements required for custom VI.

Styleswitcher (OPTIONAL)

Styleswitcher is an optional functionality in case you want to allow user to switch to different stylesheet. On the default VI user can choose either fixed layout or liquid layout. 

 
<!-- Alternate Stylesheet functionality, using styleswitcher.js  -->
<link rel="alternate stylesheet" type="text/css" href="/interface_default/common/style_large.css"      media="all" title="Large" label="large"/>
<link rel="stylesheet" type="text/css"                                                                 media="all" title="Fixed" label="fixed"/>
<link rel="alternate stylesheet" type="text/css" href="/interface_custom/common/print.css" 	       media="all" title="Print" label="print"/>
<link rel="alternate stylesheet" type="text/css" href="/interface_default/common/style_large.css"      media="all" title="Print" label="print"/>

You can read more information about styleswitcher

Print VI

It is possible to declare special stylesheet which will be called only for the printing output

Example 

<link rel="stylesheet" type="text/css" href="/interface_custom/common/print.css" media="print" />

Don’t get confused with print declaration under styleswitcher it is only intended to simulation how the printed page is going to looks like.

common/page_top.html

Unlike htmlheader.html page_top.html contains visible area of the header. This is the location where the logo and branding identity is located. 

<!-- ACCESS CONTROL -->
<div id="head_access" > <a href="/intranet/people/myprofile.php"><strong name="infobar_logged_on_as">Firstname Lastname</strong></a>| <a href="/intranet/people/mysettings.php">
  <txt name="people:home:mysettings">my settings</txt>
  </a>|
  style: <a href="#" onclick="setActiveStyleSheet('large'); cla_onresize(event); return false;" name="common:printmode:max">Max</a>&nbsp;|&nbsp; <a href="#" onclick="setActiveStyleSheet('fixed'); cla_onresize(event); return false;" name="common:printmode:fixed">Fixed</a>&nbsp;|&nbsp; <a href="#" onclick="setActiveStyleSheet('print'); cla_onresize(event); return false;" name="common:printmode:print">Print Mode</a>&nbsp;| <a href="JavaScript:window.print();">print</a> |<a href="../admin/admin.php">
  <txt name="footer:Admin">Admin</txt>
  </a>&nbsp;|&nbsp;<a href="../main/logout.php?page=/intranet">
  <txt name="footer:Logout">log-out</txt>
  </a></div>
<!-- // ACCESS CONTROL -->
<!-- HEADER -->
<div id="header">
  <h1><a href="/intranet/main/intranethome.php">Logo</a></h1>
  <!-- SEARCH -->
  <div id="head_searchbox">
    <div id="search-all">
      <form action="/intranet/search/index.php" method="get">
        <input type="hidden" name="area[]" value="1">
        <input type="hidden" name="area[]" value="2">
        <input type="hidden" name="area[]" value="4">
        <input type="hidden" name="area[]" value="8">
        <input type="hidden" name="area[]" value="16">
        <input type="hidden" name="csrf_token" value="">
        <div style="color:#fff; padding-bottom:3px;">
          <input type="radio" name="obj_type" value="747" checked="checked" onclick="this.form.action=this.value;this.form.target='_self';document.getElementById('searchfield').name='q';">
          Intranet
          <input type="radio" name="obj_type" value="/intranet/people/listpeople.php" onclick="this.form.action=this.value;this.form.target='_self';document.getElementById('searchfield').name='keywords';">
          People
          <input type="radio" name="obj_type" value="/intranet/main/all_articles.php" onclick="this.form.action=this.value;this.form.target='_self';document.getElementById('searchfield').name='q';">
          News </div>
        <input id="searchfield" name="q" type="text" size="50" value="Search..." style="width:240px;" onFocus="clearText(this)">
        <input type="submit" name="sa" value="Search"  />
      </form>
    </div>
  </div>
  <!-- //SEARCH -->
  <div style="clear:both;"></div>
  <!-- HORIZONTAL MENU -->
  <div class="menucontainer">
    <div class="adxm menu"> <component class_key="intranet_menu" menu_name="Claromentis_intranet"></div>
  </div>
  <!-- //HORIZONTAL MENU -->
  <!-- STATUS AREA -->
  <div id="statusarea" class="cleared">
    <form action="/intranet/infobar/infobarchange.php" method="post" id="toggleinfobar">
      <input type="hidden" name="calling_script" value="/intranet/main/intranethome.php">
      <input onclick="if (ToggleInfobar()) return true; else {cla_onresize(event); return false}" name="infobar_showhide" type="image" src="../../images/default/menu/toggle.gif" alt="toggle info bar" title="toggle info bar" accesskey="I">
    </form>
    <div id="trash_can" > <a name="trash_can_navigation_link" href="/intranet/documents/trash_can.php" style="color:#333;"><img src="../../images/default/menu/trashcan.gif" alt="Trash can" height="18" width="18" align="absmiddle"/></a> <a name="trash_can_navigation_link" href="/intranet/documents/trash_can.php" style="color:#333;"><component class="TrashCanNavigationComponent"></a> </div>
    <div id="trash_can"> messages: <a href="/intranet/communication/imessageread.php"><img src="../../images/default/menu/readmsg.gif" alt="You have no new messages" name="infobar_new_imessage_icon" width="18" height="18" align="absmiddle" title="You have no message" /></a></div>
    <div id="calendar" > <a href="/intranet/calendar/calendar.php?mode=3"><img src="../../images/default/menu/cal.gif" alt="Calendar" height="18" width="18" align="absmiddle" /></a>&nbsp; <a href="/intranet/calendar/calendar.php" ><span style="color:#333;">
      <txt name="infobar_today_long">Monday 26th July 2004</txt>
      |
      <txt name="infobar_today_time">09:41</txt>
      </span></a> </div>
    <p><include file="../common/statusarea.html"></p>
  </div>
  <!-- //STATUS AREA -->
</div>
<!-- //HEADER -->

common/page_bottom.html

page_bottom.html contains visible area of the footer. 

<div id="footer">
  <ul>
    <li><a href="mailto:support@claromentis.com">
      <txt name="footer:Support">Support</txt>
      </a> |</li>
    <li><a href="/intranet/help/about.php">
      <txt name="footer:About">About</txt>
      </a> |</li>
    <li><a href="/intranet/admin/admin.php">Admin</a></li>
  </ul>
  <span id="footer_copyright"> &copy; 2009 Claromentis, powered by <a href="http://www.claromentis.com" target="_blank">claromentis</a></span> </div>
Analytics code such as Google Analytics must be embeded at the end of page_bottom.html