====== 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**)
MyCompany<txt name="title_message"></txt>
===== 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**)
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.
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
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.
{{claromentis:visual:creating_custom_vi:page_top.png|}}
===== common/page_bottom.html =====
page_bottom.html contains visible area of the footer.
{{claromentis:visual:creating_custom_vi:page_bottom.png|}}
Analytics code such as Google Analytics must be embeded at the end of page_bottom.html
