Interface Styles

There are currently four interface styles shipped with the FIT product, each of which gives its own unique look and feel.

The FIT interface is controlled by the style option in the Admin Server Configuration menu. In

addition, the style attributes are controlled by a CSS file setting. These attributes can control color, placement, and formatting of the page. The administrator is able to choose from the shipped CSS options, or they can save the desired file from the system and then customize it to their own liking. (please see customization guide)
Each style is displayed and further defined below :

FIT Dropdown Menu

The latest and preferred style encapsulates all the system links into the dropdown menus to simplify the interface and allow users to access menus from one page, rather than having to traverse a set of links. We have highlighted the filter section to show exactly what data is currently in view. This menu also makes it easier to expand FIT in the future, where multiple systems will exist together.

The "Low Logo" style simply displays the menu to the right of the image and moves the search boxes up onto their own line to make use of the extra space.

Wide Blue Cells

This menu was actually designed by a customer and then added as the second menu style for the product. We are happy to work with our customers to better the product.

The "Low Logo" style simply displays the menu to the right of the image and moves the search boxes up onto their own line to make use of the extra space.

Left Menu

This style uses a left vertical menu instead of the normal top menu common to all the other styles.

Tabbed Menu

A basic tabbed menu that is used to traverse between menus in the system.

Hyperlink Menu

The original menu for the initial product is still used by many due to its simple and easy to use style. This menu organizes the various menus of the system into links which are traversed to move between menus.

Directions for Creating Custom Style Sheets

Adding a custom css file to the installation directory allows you to change the colour and layout a particular FIT style. Customizing these sheets is an advanced topic and you should be familiar with html and style sheet attributes in order to take advantage of this functionality. Many tutorials about style sheets exist on the Internet and they may be a helpful starting point.

You can view the default style sheet by going to the Fast BugTrack server URL, and typing the name of the style sheet into the "host:port" url (ie: http://localhost:10000/main.css). Depending on your browser, you may be prompted for a program to view the file with. If so, choose a text editor (such as Wordpad on a Windows system), where you can edit the file.

A good way to start customizing the look and feel is to save the style sheet and the source from one of the system menus into a directory where you can manipulate the two by themselves. this template, and use it as a starting point.

If the css file is saved into the FIT installation product (as a different name), it will be available to choose in the css dropdown list of the Server Configuration Menu.

Additional CSS Alternative

If you are on a hosted system, or you only need to change a few simple settings and do not want to create your own CSS file, you can also use the Additional CSS menu to make simple changes.

The CSS in this location will override the system CSS page.

For example, if I want the Main Menu span the complete width of the page at all times, I could make it's width "100%", by adding the following line (where other attributes are left as is):

TABLE.menu {color: #eeeeee; empty-cells: show; padding: 1 5; border: 1px solid black; border-collapse: collapse; width: 100%}