Design Document Esthetics
|This page has been updated to comply with Release 2.5.x of BOARD18.|
|Design Document edit|
Like any other application, BOARD18 needs a distinctive look.
Logo and Favicon
The logo displayed to the right will be present in the upper left hand corner of every BOARD18 page. It will be part of the standard header for each such page. In addition, a 32 pixel square icon with a reduced version of the same graphic will be used as the favicon file for this application.
Web Page Color Standards
The background of the header and main areas of all pages will be the color shown on the near left (#FFEEDD). The background of the left sidebar of all pages and any drop-down menus or forms will be the color shown on the far left (#DDFFDD).
Other areas may have modified background colors to enable them to stand out from their surroundings.
Tile Color Standards
The standard shade for each of the four tile colors is given in the following table:
Each BOARD18 page will follow this overall layout. The page will be divided into 3 fixed divisions. The top of page division, the left of page division and the right of page division. These divisions, which are shown in the diagram to the right, are formatted via the style sheets described below.
“Top of Page” Division
This division forms the logo, heading, message and menu areas of the page. It consists of the top 90 pix of the page and it's width fills the width of the enclosing window.
“Left of Page” Division
This division forms the sidebar area of the page. It consists of the left 135 pix of the page and it's hight fills the hight of the enclosing window. The sidebar division scrolls within this division.
“Right of Page” Division
This division forms the main content area of the page. It consists of the remainder of the page and it's hight and width fills the remainder of the enclosing window. The content division scrolls within this division.
BOARD18 will use cascading style sheets to control all formatting of its pages. There will be an application wide style sheet for all common formatting and another style sheet specific to each BOARD18 page. The application wide style sheet will be named board18com.css. The specific style sheets will have names based on the page with which they are associated (for example board18main.css).
The board18com.css style sheet
This style sheet lays out the overall structure of all BOARD18 pages. This consists of the top of page division, the left of page division and the right of page division. These divisions are described above. This style sheet also formats the header area of all BOARD18 pages. The top level block elements in this style sheet will all use fixed positioning.
All other BOARD18 style sheets
Every BOARD18 page will have a style sheet to format the body of the page. Some of the containing block elements in these style sheets may use absolute positioning.