FSI Skin and FSI Skin Plus Guide

FSI Viewer Skin and FSI Viewer Skin Plus options enable you to use FSI Viewer and FSI Pages with a customized/re-designed user interface that matches your company’s CI or the design of you web site. There are two different levels of FSI Viewer interface customizations:

1) FSI Skin

Basic customization covering:

  • The logos in the menu bar of
    FSI Viewer and FSI Pages
  • The color scheme of the skin
    (menu bars, buttons, tool tips etc.)

See the example to the right:

2) FSI Skin Plus

With this option you can re-design the entire user interface for FSI Viewer, FSI Pages, FSI Showcase (see notes in the corresponding section) as well as a custom intro (splash screen).


You only need to provide graphics (and optionally textual description) illustrating the desired user interface design. The design may introduce additional functionality like page number display below the pages in FSI Pages Add-on or buttons to navigate to a certain level of magnification in FSI Viewer.

Basically there is no limitation regarding the design and we will try to provide a skin that is as close as possible to the design sketch you provide. Please note that there might be customizations that cannot be implemented for technical reasons. You are very welcome to send in design sketches for FSI Skin Plus so that we can negotiate possible limitations in advance. We try to provide custom designed FSI Viewer skins at a fixed price. However, design sketches that modify all aspects of the FSI Viewer or FSI Pages interface might require additional work. In this case we will contact you in advance to inform you about additional efforts and possible simplifications.

General considerations for Skins

  • File Format
    Please make sure to provide graphics in a format with lossless compression and with alpha channel support:
    – psd (Adobe Photoshop)
    – TIFF
    – ai (Adobe Illustrator)
    – EPS
    For vector based formats, please provide a seperate file that illustrates the desired dimension of the skin. FSI Viewer does NOT rescale the interface for different FSI Viewer instance dimensions.
  • Fonts
    When using custom fonts, please include the fonts or convert fonts to vectors.
  • Icons and Logos
    Please provide logos and icons used in the design sketch including alpha channels and without / lossless compression.

FSI Viewer Skins

  • Logos
    With the default menu bar height, the height of the logo in the menu bar should not exceed 24px. Note that you might need to modify the logo for such a small size, e.g. by aligning text to the left/right instead of text below the logo.
    You can either keep the default behaviour of the logo button (show the about box) or have a customizable button. For the customizable button you can specify and URL, a target frame and a tool tip.
  • With FSI Skin Plus you can optionally redesign the about box.
  • Buttons and icons
    The button states need to be the same for all buttons. Please provide the graphics for the button states:
    – normal
    – mouse over
    – pressed
    – disabled
    seperately. You do not need to provide the states for all buttons, as only the icons for each button may differ. This means you should provide 1 button in 4 states and different icons to put atop this button.
  • Cursors
    Custom software cursors can be integrated on request. You can on the other hand create your own cursor library. Please refer to the FSI Viewer Contribution package.

Intro / Splash screen

Modifying the intro being displayed while FSI Viewer loads is available only with the FSI Skin Plus option.
Basically you can use any animation or static image for an FSI Viewer intro. Please keep in mind the following notes:

  • FSI Viewer runs at 35 frames/second (fps)
    Any custom animation must use this fps rate as well. If you use a different fps (e.g. 12 fps) for your animation, the animation will play too fast.
  • Keep animations short
    FSI Viewer efficiently caches components. The startup time might therefore be less than 1 second. You might therefore want to make sure that the intro is visible within 0.5 seconds. An animation that fades in for 2 or more seconds will likely not be visible at all once FSI Viewer has already been loaded once on a users computer.
  • Keep intro files sizes small
    Using an intro of more than 50kb does not make too much sense. In this case the user will have to wait for the intro to load rather than for FSI Viewer.
  • File format
    When providing Adobe Flash based animations make sure:
    – to provide the FLA (*.fla) source file NOT a compiled SWF file (*.swf)
    – to use a Adobe Flash version compatible with FSI Viewer (publish as Adobe Flash version 6)
    Using a higher target Adobe Flash version will break the backwards compatibility of FSI Viewer.
  • Provide transparent images or animation
    Please keep in mind that you can change the background color of the FSI Viewer instance and that the intro will be displayed on top of the image/catalog. You can provide both – opaque or transparent – intro graphics, but please make sure that they look o.k. on different background colors.

FSI Pages

The FSI Pages add-on uses a seperate skin file for the FSI Pages user interface. When zooming a page, the FSI Viewer skin will be used.

  • Buttons
    In contrast to FSI Viewer skin, each FSI Pages button may have different design.
    With FSI Skin Plus you can add additional buttons, that call custom URLs (or JavaScript function),
    e.g. a “recommend this catalog” button.
  • Scroll Bars
    Customizing the “slider” below the pages (to select a page) is possible. Customizing the scroll bars (e.g. in the thumbnail view) is possible regarding the colors only.
  • Dialogs
    You can specify the colors for the dialogs (print, save, etc.) seperately. Modifying the design of the dialogs except for the colors, line widths and rounded edges is not possible.

FSI Showcase

There is no seperate skin for the FSI Showcase add-on.
You can on the other hand use the default color scheme and layout parameters for a skin.
Customizing FSI Showcase add-on (e.g. the button of the splitter bar) is not supported and only possible on request in combination with the FSI Skin Plus option.

Demo Skins

We have provided 2 very simple demo skins for FSI Pages and FSI Viewer in Adobe Photoshop format. You can download these demonstrational skins and see how a skin sketch should be submitted:

Sample FSI Viewer Skin

Sample FSI Pages Skin