Skip to main content

Advanced custom skins

The FSI Viewer and FSI Pages skins can be easily customised using CSS to match the design of your website.

The Creating Custom Skins for FSI Viewer tutorial shows you the basic structure of the CSS file with an example custom skin. This tutorial explains how to modify the skin in a more advanced way by overriding core CSS rules, using the example of changing the FSI Viewer logo to a custom logo.

CSS rules that define the general appearance and are valid on a general level are defined in the corresponding core CSS files located in /_viewers/skins/resources - for FSI Viewer these are fsi-core.css and fsi-viewer-core.css, for FSI Pages these are fsi-core.css and fsi-pages-core.css. The core CSS files are also loaded before the skin defined by the skin parameter - so any changes made to the custom skin CSS will override the core CSS rules.

IMPORTANT:

Never modify the classes in the core CSS files. If you want to change the CSS rules listed there, please overwrite them in a custom skin file or in the HTML document instead.

Changing the FSI Viewer skin​

For example, if you want to change the viewer logo, simply add the .fsi-ui-logo-image class, originally defined in fsi-viewer-core.css, to your custom skin CSS:

.fsi-skin-green .fsi-ui-logo-image {
  /* - you can specify an URL to any other logo here */
  /* - or use "none" for no logo at all */
  background-image: url('[fsi-skin-path]resources/example_logo.svg');
  width: 3em;
}

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 /_viewers/skins of your FSI Server installation. It is also possible to set the background-image to "none" to remove the logo from the menu bar completely.

FSI Viewer Example​

Changing the FSI Pages skin​

In general, the same CSS rules apply to FSI Pages as to FSI Viewer. The more individual rules are defined in fsi-core.css or fsi-pages-core.css, e.g. the appearance of the dialogs or the margins of the pages.

To create a new skin, copy one of the existing CSS files in the /_viewers/skins folder or download this example skin here:

.fsi-skin-example .fsi-pages-main-view .fsi-pages-page-container {
  margin: 20px;
}

Defines a margin for pages/ double pages.

/* dialogs */
.fsi-skin-example .fsi-dialog {
  border: 3px solid #33b1aa;
  background-color: #fff;
  color: #454545;
}

.fsi-skin-example .fsi-dialog input[type='button'] {
  font-size: 14px;
  color: #454545;
  border: 1px solid #33b1aa;
  background-color: transparent;
}

.fsi-skin-example .fsi-dialog input[type='button']:hover {
  color: #fff;
  background-color: #33b1aa;
  border: 1px solid #33b1aa;
}

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

/* Pages Bookmarks */

.fsi-skin-example div.fsi-pages-bookmark-icon {
  background-image: url('[fsi-skin-path]resources/svg/bookmark-flag.svg');
}

.fsi-skin-example div.fsi-pages-remove-bookmark-icon:hover {
  background-color: #33b1aa;
  color: #fff;
}

.fsi-skin-example .fsi-pages-remove-all-bookmarks:hover {
  background-color: #33b1aa;
  border-color: #33b1aa;
}

.fsi-skin-example span.fsi-pages-bookmark-added {
  font-weight: bold;
  color: #33b1aa;
}

div.fsi-pages-bookmark-icon defines the look of the bookmark 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 colour of the text that appears in the tooltip when a bookmark is added.

/* Pages Thumb Index Styles */

.fsi-skin-example
  .fsi-pages-thumbindex
  .fsi-pages-page-container.selected
  .fsi-page-number {
  background-color: #33b1aa;
}

.fsi-skin-example .fsi-pages-thumbindex .fsi-pages-page-border.selected {
  -webkit-box-shadow: 0px 0px 0px 2px #33b1aa;
  -moz-box-shadow: 0px 0px 0px 2px #33b1aa;
  box-shadow: 0px 0px 0px 2px #33b1aa;
}

.fsi-skin-example
  .fsi-pages-thumbindex
  .fsi-pages-page-container.selected
  .fsi-pages-page-border {
  -webkit-box-shadow: 0px 0px 0px 2px #33b1aa;
  -moz-box-shadow: 0px 0px 0px 2px #33b1aa;
  box-shadow: 0px 0px 0px 2px #33b1aa;
}

These classes define the look of the page index page.

FSI Pages Example​