Creating advanced custom skins for FSI Viewer/ FSI Pages

In order to fit the design of your website perfectly, the FSI Viewer and FSI Pages skin can easily be customized to your liking via CSS. The tutorial Creating custom skins for FSI Viewer shows you the basic structure of the CSS file with an example custom skin. This tutorial explains how to change the skin in a more advanced way by overruling core CSS rules, with the example of changing the FSI Viewer logo to a custom logo.

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 WEBAPPS/fsi/viewer/skins/resources – For FSI Viewer, fsi-core.css and fsi-viewer-core.css apply, for FSI Pages, 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.

View FSI Viewer with custom skin
View FSI Pages with custom skin

If you would like to change the logo of the viewer for example, just add the class .fsi-ui-logo-image, which is originally defined in the fsi-viewer-core.css, to your custom skin CSS:

Copy to Clipboard

[fsi-skin-path] refers to the location of your custom skin CSS – usually, this is WEBAPPS/fsi/viewer/skins/ of your FSI Server installation.
It is also possible to set the background-image to “none” in order to omit the logo completely out of the menu bar.

Example for FSI Viewer with custom skin

View FSI Viewer with custom skin

Altering the FSI Pages skin

For FSI Pages, in general the same CSS rules apply as for FSI Viewer. The more individual rules are defined in the fsi-core.css or the fsi-pages-core.css, for example the appearance of the dialogs or the margins of the pages.
For creating a new skin, copy one of the existing CSS files in the WEBAPPS/fsi/viewer/skins or download this example skin here: example.css
Please check the above mentioned CSS files and if you would like to adapt them, please list them in your custom skin CSS, for example:

Copy to Clipboard

Defines a margin for pages / double pages.

Copy to Clipboard

Defines the look of the dialogs, e.g. the Print dialog available over FSI Pages.

Copy to Clipboard

div.fsi-pages-bookmark-icon defines the look of the bookmarks icon, it is also possible to use a custom svg placed in the corresponding folder.
div.fsi-pages-remove-bookmark-icon:hover and .fsi-pages-remove-all-bookmarks:hover define the look of the bookmark index.
span.fsi-pages-bookmark-added defines the color of the text which appears in the tooltip when a bookmark is added.

Copy to Clipboard

These classes define the look of the page index page.

Example for FSI Pages with custom skin

View FSI Pages with custom skin