CHRM Redesign Documentation

General coding notes:

I have made many changes to the html, css and javascript while working on these templates. You will need to make sure you integrate these changes into your working copy. I have tried to highlight some of the most important changes in these notes, but please make sure to review the latest version of the code for any changes so your demo copy will work correctly.
Always be sure to replace your css and javascript files with the latest versions from my repository.
Please avoid making any changes to the css files for these templates. If you run into display issues which require a change to the css, please contact Damon Tribble at 650.585.1042 or damon@tribbledesigns.com and I will make the fix as soon as possible.
The templates have been tested and should render consistently in the following browsers.

Windows: IE8b2, IE7, IE6, Firefox 3, Firefox 2, Firefox 1.5, Safari 3.1, Google Chrome
Mac: Safari 2, Safari 3, Firefox 3, Firefox 2

The templates rely heavily on css to create the layout. In order for this to work, it is important that all “id” and “class” attributes be preserved when building the application . If possible, please preserve the “id” attribute which is applied to the <body> tag of each template. While it is not used currently, it will be useful in the future for adding specific styling to specific types of pages.
The "clearfix" style which appears on many elements in the templates is very important to the layout. Please preserve this class when building the application.

Explanation of files

CSS files

normalize.css - This css document resets the properties of all HTML elements to create a baseline and avoid browser inconsistencies.
screen.css - This is the main css document that powers the layout of the new template.
print.css - This is the print stylesheet for the template.
ie.css, ie6.css, ie7.css, ie8.css - These style sheets contain css bug fixes specific to Internet Explorer.

Javascript files

scripts.js - This is the main javascript document.
jquery-1.2.6.min.js - This is the jquery library.
ie.js, ie6.js, ie7.js, ie8.js - These javascript documents are set up to serve javascript to Internet Explorer.
cb.js - This javascript is used to help create the custom corners and borders on the blocks on the dashboard and other pages.
jquery-ui-personalized-1.6rc2.min.js - This is a customized version of the jquery UI library (http://ui.jquery.com) which is used to create the drag-and-drop functionality in the data export template.
jquery.metadata.js - This script is used by the jquery-ui-personalized-1.6rc2.min.js script.
jquery.dimensions.js - This jquery plugin adds the ability to determine the height, width and other dimensions properties of elements.

General template notes

Please note that the <body> tag must have a class="product_XXX" attribute, where "XXX" is the version of the product. For example, <body class="product_360" will make the design have the CHRM 360 colors and logo.
The site is wrapped in two divs which are important to the design of the site: <div id="container_wrapper"> and <div id="container">
Inside of <div id="container"> are three divs:
- <div id="header"> contains the site branding, search, help links and navigation.
- <div id="content"> contains the main content of the site.
- <div id="site_info"> is the footer of the site.
The logo of the site is created by the <h1> inside of <div id="header">. It is important that both the <h1> and the image which follows it appear as in the following example:
<h1><a href="/">CHRM*360 Professional Edition</a></h1>
<img src="images/logo-chrm_360.gif" alt="CHRM*360 Professional Edition logo" width="208" height="53" id="logo" />
The top navigation of the site is made up of three levels of unordered lists (<ul>). To show a certain tab and its submenus as selected when the page loads, simply add class="selected" to the top-level <li>. For example: <li class="selected"><a href="#">Workforce</a></li>.
If a navigation item has a third level of navigation, the arrow which indicates that there is a submenu will be automatically displayed via javascript as in the following image:
On most of the pages on the site, the main content is surrounded by a box with rounded corners. Any element with class="cbb" will have these rounded corners. This effect is achieved by using javascript to insert several divs into the code on the client side which are then able to be styled by CSS.
The orange buttons throughout the site are created by wrapping a <div> with id="pageButtonWrap" around <input type="button"> with class="inputButton". If possible, please add a second item to the class of each button which follows the format "controls-name_of_button" as in the following example. This will allow for more flexible css styling in the future.

<div class="pageButtonWrap">
<input type="button" class="inputButton controls-export" value="Export" />
<input type="button" class="inputButton controls-save_template" value="Save Template" />
<input type="button" class="inputButton controls-cancel" value="Cancel" />
</div>
Any table which is too wide to fit within the page (because of too many columns added by the user) will automatically scroll horizontally. This is done by detecting the width of the table via javascript and adding a div with "overflow:scroll" around any tables which are too wide.

Login Template

It is very important that this template have <body id="login_template"> for it to display correctly.

Dashboard Template

The blocks on the dashboard page are made by <li> inside two <ul>. The left <ul> must have id="my_blocks" and the right <ul> must have id="company_info". Each <li> in these lists must have class="cbb".
The icons in the dock and next to the headers in the blocks are regular <img> elements. They were previously inserted by css, but now simply appear as image elements in the code. A default icon has been created for any blocks which do not have unique icons.

Profile Template

The profile tabs are created by a <ul> with class="tabs semtabs". To show a tab as selected, simply add class="selected" to the <li> for that tab.
You can populate the list of tabs with all of the possible tabs. If there are more than six tabs, javascript will take the extra tabs and put them in a dropdown menu.
There are two types of tables in a profile page:
- <table class="detailed_info"> is a two-column table with the <th> in the left column and the information in the right column. These should be used for tables with only one set of data.
- <table class="data_table"> should be used for tables with multiple columns and rows of information.

List Tables

The number of search results and pagination are displayed in a <div class="table_info_pagination">.
<div class="data_table_parameters"> is for displaying any parameters which affect the values in the table. To create rows in this area, wrap each row in a <div class="parameters_group">.
A sort ascending or sort descending arrow can be displayed by adding class="sortDown" or class="sortUp" to the <th>.
A copy icon can be added to a <th> by adding a <a class="copy" href="#">Copy</a> into the <th>. This link can be used to make all values in a column match.
The icons in the "Actions" column are created by adding classes to the links in this column as in this example:
<td class="actions">
<a class="view" href="#">View</a>
<a class="edit" href="#">Edit</a>
<a class="run" href="#">Run</a>
<a class="delete_record" href="#">Delete</a>
</td>

Reports Template

I have placed a placeholder image for the chart in the reports page. This will need to be replaced by the image created by your charting tool.

List Page Template

Each column in the search area is created by <div class="search_section">.
I am still working on a solution which looks good when there are only two columns of search fields. I will give you a new solution for this in late December.

Department Tree

The tabs on this page do not load a new page into the browser. Instead, they hide and show various <div> on the page via javascript. The following is important to make this work:
- Wrap any tabs which should hide/show panels in <div class="in_page_tabs">
- Make sure that the text of the tab matches the title attribute of the panel it should show as in the example below:
  <ul class="tabs semtabs">
  <li class="selected"><a href="javascript:void(0);">Tree View</a></li>
  <li class=""><a href="javascript:void(0);">Search</a></li>
  </ul>
  <div title="Tree View" id="dept_tree_container" class="panel">
  </div>
  <div title="Search" id="dept_tree_container" class="panel">
  </div>
The tree code and scripts on this template are for example purposes only. They are based on the Yahoo UI library. They should be replaced/modified with your own tree code.

Data Export Template

This template uses javascript from the jQuery UI plugin (http://ui.jquery.com) for drag-and-drop and sorting fuctionality. I have used this script for sample purposes only. Feel free to use this javascript or a different one that works for you.

Query Builder Template

This template uses javascript tabs in the same way as the Department Tree template. Please read the notes above for information on theset tabs.
Please note the two rows of parameters in the search conditions section of this template. These rows are created by putting two <div class="parameters_group"> inside of <div class="data_table_parameters">.