Template Object Model:
Introduction to Template Customization
and Branding Leverage Theory

History of Templates at S1: the Pre-Template Era
In the original implementation of VBM (up to release 4) HTML code was created on-the-fly for each customer by large, complex C code processes. The HTML was broken up into small sections and distributed through a dozen sections of code for each page. This made it very difficult to change layout of the page, or even the formatting of a small part of it.
On the other hand, through changes to the configuration it was possible to make changes across every page with only a few keystrokes for a few special cases; very powerful. The difficulty was we could not anticipate all the possible changes (including frames, javascript, etc.) to the screen designs, and if we could, there would be no possible way to construct a feasible code-based configuration layer to actually provide this function.

The New Era: the VFM5 Template Object Model
In VFM5, TOM allows considerable control over the appearance of the UI with no template code changes, using only CSS edits and image substitutions. Larger changes to shared code objects can alter the location and layout of identity, footers, site navigation, and even product navigation.
By breaking the templates into hierarchical structures with shared sections, common objects like headers and footers can be structurally altered with minimal file editing. Since almost all FI's will have more expertise and desire for graphics and navigation 'styling' rather than wanting widespread form process changes, the hierarchical layout provides leverage for more easily implementing those kind of customizations.
Finally, the individual form templates can be edited to alter on-screen help, language, and even some processing. Here are a few mockups built on the new model which show some simple examples of the ladder of changes available through TOM.
SoftOps Site Navigation
SoftOps Index
SoftOps Org Charts
Boston Technology Group
Support Services
Technical Publications
Tools and References
Product Management Index
Branding Scenarios
Branding Scenarios are high-level descriptions of branding requests and which template objects to modify to make the changes. These are not step-by-step checklists, but general discussions for where to begin. TOM Customization: Bottom Footer Reference: Standard Template Positioning
Move Product Toolbar functions to Top:
  • Edit id_nav_*.tmpl templates and images to act as headers for navigation
  • Edit nav_*.tmpl templates and images to change shape of table and add align=top argument to <table> tag
TOM Customization: Top Navigation
Move Footer information to Left Toolbar:
  • Remove content from id_footer.tmpl
  • Add content to id_nav_footer.tmpl
TOM Customization: Left Footer
Remove 'Page' look around Form Data:
  • Edit CSS file to make form classes same background as class=bkgnd
  • Replace id_form_curve*.gif corner images with clear GIFs
TOM Customization: No Page Look
Remove Alternating Rowcolor look from Tables:
  • Edit CSS file to make class=*grey classes match class=*

Move Footer to Bottom of Page:
  • Edit id_footer.tmpl file to close open form table, start new table for footer in same file with align=bottom in <table> tag
TOM Customization: Bottom Footer
eMail comments about this page to the pRCarter.
Copyright © 1997 - 1998, S1. All rights reserved. Created by S1
iWeb Links
iWeb Main
General Info & Admin
Sales & Marketing
Org Charts
S1 Index
S1 (external)
SFNB (external)