• The application should be able to provide predefined set of UI themes.
• The company admin can choose one from the available themes. (A UI should be available that lists the available themes and one can be selected)
• Once activated the application should use UI elements from the selected theme when url of that company is invoked.
• The themes can have different color schemes, fonts and layout.

Layout means the number of columns and rows in the UI grid. e.g. main block of content and a secondary block of content. The orientation of the secondary block can be on left or on right. Can have 2 secondary blocks and one main block and so on. Some visual examples are below

Sample 1

Sample 2

There will be default set of UI themes (created by us) which will be available to all the companies. Some themes can also be made available to only to specific set of companies. Note that the functionality will not change just the UI elements and their placement will change.

• The community_engine give ability to plugin a theme but that is not dynamic. If we create a theme want the application to use that theme instead of default UI the name of the theme to be used has to be mentioned in the application configuration. The current implementation does not allow to change the themes at run time i.e to apply “X” theme for company “A” and “Y” theme for company “B”. Some tweaks can be made in its code to support dynamic themes.

• The UI of community engine uses YUI 2 grids css (http://developer.yahoo.com/yui/grids/) for styling the UI frame. Using YUI css we can implement different UI templates with different columns.

• Creating a new theme will require development/testing efforts at our end.

The actual files of the themes will reside in the “RAILS_ROOT/themes” folder. The directory structure will be

- application-root
  - app
    - controllers
    - models
  - config
  - ...
  - themes
    - company_{id}
      - company_theme_1
      - company_theme_2
    - two_columns
      -  related files
      - ...
      - ...
    - three_columns
      -  related files
      - ...

Since there is a possibility of providing theme that is specific to a company we will store them in the folder with name “company_#{id}”. “id” is the ID of the company in the companies table (The company name cannot be use as it may contain spaces). The reason for defining company specific themes in a subfolder is to determine some way to prevent the company themes from being overwritten when a upgrade to the product happens.

• The themes that are defined directly under the “themes” folder will be considered as default themes and will be available to all the companies. So at any point when the company admin opens up the UI to select a theme he will see all the themes that are present under themes folder as well as themes that are present under its company folder.