Custom skins
The FSI Viewer and FSI Pages skins can be easily customised via CSS to match the design of your website. This tutorial shows you the structure of the CSS file with an example of a custom skin.
Where skins are located in your FSI Server installation
FSI Viewer comes with five default skins: black, black-flat, white, floating and silver.
Skins are defined by CSS and can be found here in the Web Interface: /_viewers/skins.
Custom skins can be placed in this location. FSI Pages uses the same skin CSS files as FSI Viewer.
CSS rules that define the general appearance and are valid on an overall 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.
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.
The best way to create a new skin is to copy one of the existing skins and modify it to your liking.
How skins are implemented in the fsi-viewer/ fsi-pages tag
The name of the skin used must be defined in the tag.
<head>
[…]
<!-- adding the fsiviewer.js script -->
<script
src="http://yourserver.com/fsi/viewer/applications/viewer/js/fsiviewer.js"
type="text/javascript"></script>
</head>
<body>
[…]
<!-- adding parameters directly to the tag: -->
<fsi-viewer
width="500"
height="600"
src="/images/sample.jpg?x69840"
debug="true"
skin="example">
</fsi-viewer>
</body>
The same steps apply to FSI pages.
How the CSS looks like
For creating a new skin, copy one of the existing CSS files in the /_viewers/skins or download this example skin here:
You can then modify the skin to suit your needs.
In the following section, the sample skin has been broken down to show you what you can do.
Always use a custom class in front of ALL classes defined in the CSS file (in this example: .fsi-skin-example), otherwise you will break other skins on the same HTML document.
.fsi-skin-example .fsi-ui-info:before {
content: '{"floatingMenuBar":true, "floatingNavWindow":false, "baseEnlargement":12, "baseSkinSize":12}';
}
floatingMenuBar enables a floating menu bar that overlaps the image. This is useful for transparent menu bars as in our example.
baseEnlargement defines the enlargement of the menu bar / icons per DevicePixelRatio value. This has a default value of 8.
Another available option is baseSkinSize, which also enlarges the icons on the desktop.
.fsi-skin-example .fsi-ui-menu-bar {
background: rgba(255, 255, 255, 0.8);
}
Defines the look of the main menu bar container.
.fsi-skin-example .fsi-ui-button {
background: rgba(255, 255, 255, 0.2);
border: 1px solid solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
}
This defines the base button class.
.fsi-skin-example .fsi-ui-button-hover {
background-color: #fff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(56, 176, 170, 0.2);
}
This is the style used for hovered buttons.
.fsi-skin-example .fsi-ui-button-hover {
background-color: #fff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(56, 176, 170, 0.2);
}
This is the style used for pressed buttons.
.fsi-skin-example .fsi-ui-button-icon {
color: #33b1aa;
}
This is the base button icon class.
.fsi-skin-example .fsi-ui-button-disabled .fsi-ui-button-icon {
color: #bec7c6;
}
.fsi-skin-example .fsi-ui-button-hover .fsi-ui-button-icon {
}
.fsi-skin-example .fsi-ui-button-active .fsi-ui-button-icon {
}
.fsi-skin-example .fsi-ui-menu-bar-disabled .fsi-ui-button-icon {
color: #bec7c6;
}
These classes define the style of the icons when disabled, hovered, active or in case the menu bar is disabled.
.fsi-skin-example .fsi-ui-select-frame {
border-color: #33b1aa;
background-color: rgba(255, 255, 255, 0.25);
}
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.
.fsi-skin-example .fsi-ui-progressbar {
color: #33b1aa;
background-color: rgba(255, 255, 255, 0.5);
border-color: #999;
}
.fsi-skin-example .fsi-ui-progressbar-text {
color: #555;
}
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.
.fsi-skin-example .fsi-ui-tool-tip {
color: #4d4d4d;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #4d4d4d;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.fsi-skin-example .fsi-ui-tool-tip-arrow {
border-top: 7px solid #4d4d4d;
}
Define the style of the tooltips that are displayed if you hover over a button.
.fsi-skin-example .fsi-ui-nav-window {
background-color: rgba(255, 255, 255, 0.8);
}
.fsi-skin-example .fsi-ui-nav-window-image {
border: 1px solid #33b1aa;
background-color: rgba(255, 255, 255, 0.8);
}
.fsi-skin-example .fsi-ui-nav-frame {
border-color: #33b1aa;
background-color: rgba(255, 255, 255, 0.35);
}
.fsi-skin-example .fsi-ui-nav-window-zoom-text {
color: #4d4d4d;
}
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.
fsi-skin-example .fsi-ui-hotspot {
border: 1px solid #999;
border-radius: 2px;
background-color: rgba(222, 222, 222, 0.85);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.fsi-skin-example .fsi-ui-hotspot-hover {
background-color: rgba(240, 240, 240, 1);
}
.fsi-skin-example .fsi-ui-hotspot-active {
background-color: rgba(240, 240, 240, 1);
}
These classes define the look of hotspots if used.
FSI Pages
Changes:
/* FSI Pages */
.fsi-skin-example .fsi-ui-button.PageInput {
background-color: white;
border: 1px solid #ccc;
color: #333;
}
.fsi-skin-example .fsi-ui-button.PageInput input:focus {
border-color: #999;
color: #000;
}
For FSI pages, the same rules apply to the menu bar, buttons, icons and tooltips. Above are the PageInput CSS rules, which can also be adapted to your needs.
The tutorial Creating advanced custom skins for FSI Viewer /FSI Pages explains how to change the dialogs (e.g. for the print window) or the margins for FSI Pages.