Case Studies

Skins and Style Attributes

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 :

Style selection

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.

Blue Dropdown menu style

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.

Wide Blue Cell Style

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.

Left Menu Style


Tabbed Menu

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

Tabbed style


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.

Blue hyperlink style


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%}

 

Customer Testimonials

Case Studies

Free Live Demo

30 Day Guarantee

Contact Us