Creating advanced custom skins for FSI Viewer JS/ FSI Pages JS

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. The tutorial Creating custom skins for FSI Viewer JS 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 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.

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] 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 JS with custom skin

If you click the button you can see a FSI Viewer JS which uses a custom font with custom logo.

View Sample with custom skin/ logo

Altering the FSI Pages JS skin

For FSI Pages JS, in general the same CSS rules apply as for FSI Viewer JS. 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:

Defines a margin for pages / double pages.

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

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.

Example for FSI Pages JS with custom skin

If you click the button you can see a FSI Pages JS which the changes made above.

View FSI Pages JS sample with custom skin
Posted in: