IBM WebSphere Multichannel Bank Transformation Toolkit, Version 7.1

Web2.0 theme

Overview

BTT Web2.0 on demand workplace provide a strong customizable and extensible capability of theme based on standard .css technology. The appearance and style can be easily changed. Currently We have two level theme customization. The first one is .css level customization. BTT Web2.0 on demand workplace extract multi-css files for all ui elements. Each .css file define the style of one or more UI elements's . You can change the look and feel of each ui element by override related css file. This level customization fit for developer to define the style of whole page. The second one is API level customization. BTT Web2.0 also provide some useful javascript api to change partial UI element's look and feel dynamically. For example, the user may change his own wallpaper and font size without any refreshing and page reloading. This level customization fit for end-user to define his own personality workspace. The developer can provide user various kinds of personalized control panel to define their own style.

CSS Definition

BTT Web2.0 on demand workplace extract multi-css files for all UI elements. Each .css file define the style of one or more UI elements's. By default we provide 2 default themes for both iPanel and iWindow layout. BTT Web2.0 theme is ordered by folder, each theme will have it's own folder and file structure. Same layout but different theme will have the same folder and file structure. Following will give you a brief introduction of the theme structure and use of each file.

iPanel Layout

  1. BTTVO.css : Used to define the page style of iPanel layout, such like tree style, banner style, content window.
  2. Sample.css: Used to define the basic structure and the skeleton of iPanel page.

iWindow Layout

  1. Fixedboard.css: used to define the style of fixedboard window on the desktop.
  2. Menu.css: used to define the style of start menu and it's sub menu.
  3. Taskbar.css: used to define the style of taskbar.
  4. Window.css: used to define the style of movable pop up window.
  5. Style.js: used to control more complex style change. For example, move the minimum, maximum, refresh and close buttons to the left side of the top window from right side.


Feedback