In order to fit the design of your website perfectly, the FSI Viewer JS and FSI Pages JS skin can easily be customized to your liking via CSS. This tutorial shows you the structure of the CSS file with an example custom skin.
Where skins are located in your FSI Server installation
FSI Viewer JS comes with four default skins, “black”, “black-flat”, “white” and “silver”. Skins are defined via CSS and can be found here: /fsi/web/viewer/skins.
In this location custom skins can be placed.
For FSI Pages JS, the same skin CSS files as for FSI Viewer JS apply.
CSS rules, which define the general appearance and are valid on an overall level, are defined in the corresponding core CSS files, which can be found in /fsi/web/viewer/skins/resources – For FSI Viewer JS, fsi-core.css and fsi-viewer-core.css apply, for FSI Pages JS, fsi-core.css and fsi-pages-core.css apply.
The core CSS files will also be loaded before the skin which is defined via the parameter skin – so all changes made in the custom skin CSS overrule the core CSS rules.
IMPORTANT: Never change the classes of the core CSS files. If you would like to adapt the CSS rules listed there, please overwrite them in a custom skin file or in the HTML document instead.
For creating a new skin, it is recommended to copy one of the existing skins and adapt it to your liking.
How skins are implemented in the fsi-viewer/ fsi-pages tag
In the tag, the name of the skin used needs to be defined.
The same steps apply for FSI Pages accordingly.
How the CSS looks like
For creating a new skin, copy one of the existing CSS files in the /fsi/web/viewer/skins or download this example skin here: example.css
You can then alter the skin in order to fit your requirements. In the following section; the example skin is fragmented in order to explain you the possibilities you have.
Important Note: Always make sure to use a custom class in front af ALL classes defined in the CSS file (in this sample: .fsi-skin-example), otherwise you will break other skins on the same HTML document.
floatingMenuBar enables a floating menu bar which overlaps with the image. This is useful for transparent menu bars like in our example.
baseEnlargement defines the enlargement of the manu bar / icons per DevicePixelRatio value. This has a default value of 8. Another available option is baseSkinSize, which enlarges the icons also on desktop.
Defines the look of the main menu bar container.
This defines the base button class.
This is the style used for hovered buttons.
This is the style used for pressed buttons.
This is the base button icon class.
These classes define the style of the icons when disabled, hovered, active or in case the menu bar is disabled.
Defines the style of the frame which appears when you select an area while being in zoom mode. Please be aware that this is a pseudo class, i.e. that only these two values will be read.
Define the look of the progressbar which is displayed when loading image sequences. Please be aware that both classes are pseudo classes, i.e. that only the values stated will be read.
Define the style of the tooltips that are displayed if you hover over a button.
These classes define the look of the navigation window displayed in the right corner. The class .fsi-ui-nav-window-zoom-text defines the text that shows the zoom percentage below the nav window image.
These classes define the look of hotspots if used.
FSI Pages JS
For FSI Pages, the same rules for the menu bar, buttons, icons and tool tips apply. Above listed are the PageInput CSS rules which can be adapted to your liking as well.
The tutorial Creating advanced custom skins for FSI Viewer JS/ FSI Pages JS will explain how to alter the dialogs (e.g. for the Print window) or the margins for FSI Pages Js.
Example
If you click the button you can see a viewer which uses the skin that is described above. You can download the css here for testing: example.css