Implementation of Admin and Supplier Themes


Implementation of Admin and Supplier Themes

The look and feel of the Four51 Administrative and Supplier interfaces can be customized and branded. Customization can be accomplished with either customized stylesheet themes or customized HTML themes.

Custom Stylesheet Themes 
Custom stylesheet themes are the fastest and easiest type of theme to implement. They allow you to take the basic layout of the default theme and change colors, fonts, etc. by manipulating pre-defined styles in a cascading stylesheet.

Steps to create a custom stylesheet theme:
   1.   Download and save this file: http://www.four51.com/Stylesheets/DefaultStyles.css.
   2.   Create a file named “styles.css.”
   3.   Locate styles defined DefaultStyles.css that you would like to change, and copy their definitions to styles.css.
   4.   Make your desired changes in styles.css.

Custom HTML Themes
Custom HTML themes allow the look and feel of the interface to be redesigned completely from scratch. A custom HTML theme consists of an HTML template file and any supporting images, stylesheets, etc. The template file, which must be named template.htm, contains pre-defined tokens which act as placeholders for content generated by the Four51 application.

Steps to create a custom HTML theme:
   1.   Create a template web page named “template.htm.” Make sure it is a complete, well-formed HTML page with <html>, <head>, and <body> tags. <form> tags are not allowed.

   Additional tips:
      a.   References to external files (images, stylesheets, etc.) should use URLs relative to your template.htm file. For example, assume your theme has 2 subdirectories: Images and extrafiles. These URLs will work correctly:
      <img src="Images/pic.jpg">
      <a href="extrafiles/filename.htm">
      Absolute URLs such as these will not work correctly:
      <img src="/Images/pic.jpg">
      <a href="http://www.four51.com/extrafiles/filename.htm">
      b.   In general, including links to specific URLs within the Four51 application from your template is not recommended because these URLs may change without notice.
      c.   It is recommended that links to external websites be opened in a new browser window to prevent the user's session from expiring on Four51.

   2.   Add pre-defined tokens (explained below) to template.htm where you want the associated content to appear.
   3.   Download and save this file: http://www.four51.com/Stylesheets/DefaultStyles.css
   4.   Modify DefaultStyles.css as desired. (Most styles defined in DefaultStyles.css are applied to content generated by the Four51 application and are therefore relevant to both custom stylesheet themes and custom HTML themes.)
   5.   Make sure template.htm appropriately links to the stylesheet. (You may rename DefaultStyles.css if you wish, but it is recommended that you keep it separate from other stylesheets linked from template.htm.)
Placeholder tokens for custom HTML themes:
 
 Token HTML Tag Multiple
instances allowed?		Meaning 
 [[MainNav]] <div id="MainNav"> NoRenders the main navigational links. (Appear as tabs along the top by default. HTML structure described in DefaultStyles.css.)
 [[SubNav]] <div id="SubNav"> NoRenders the sub-navigational links within a main nav section. (Appears in left side bar by default. HTML structure described in DefaultStlyes.css.)
 [[BreadcrumbNav]] <div> No Not currently implemented.
 [[MainContent]] <div> No The page-specific main work area rendered by the Four51 application.
 [[PageTitle]] N/A (text only) Yes Text of page title. (Recommended in <title> section inside <head>, as well as somewhere in the <body>.)
 [[Logo]] <img> YesRenders your company's logo image.
 [[HelpLink]] <a> YesText link to app help contents.
 [[LogOffLink]] <a> YesText link to app logoff.
 

Reference Material:
Suggested style reference guide

Related Articles: None

Labels: Themes, Admin