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 /fsi/web/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.
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:
[fsi-skin-path] is a template that will be replaced at runtime with the URL to your FSI Viewer skin path – usually, this is the URL to /fsi/web/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
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 /fsi/web/viewer/skins folder 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:
Defines a margin for pages / double pages.
Defines the look of the dialogs, e.g. the Print dialog available over FSI Pages.
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.
These classes define the look of the page index page.