Skip to main content

Example of a custom skin CSS file

In order to use a custom skin, the easiest way would be to duplicate one of the default skin CSS files and adapt them to your liking. Make sure to use a custom class in front af ALL classes defined in the custom CSS, otherwise you will break other skins on the same HTML document.

General appearance CSS rules, which are valid on an overall level, (e.g. the logo container, height of the menubar, etc.) are defined in the corresponding core CSS files, which can be found in /fsi /viewer/skins/resources. (fsi-core.css, fsi-viewer-core.css, fsi-pages-core.css)

warning

Never change the classes of the core CSS in the core files directly. If you would like to adapt those CSS rules, please overwrite them in a custom skin file or in the HTML document instead.

Example:
/* IMPORTANT NOTES */
/* - make sure to use a custom class in front af ALL classes defined here
(in this sample: .fsi-skin-example) */
/* otherwise you will break other skins on the same HTML document */
/* enables a floating menu bar which overlaps with the image */
/* useful for transparent menu bars */
/* baseSize defines the size of all skin elements (default 16) */
/* baseEnlargement defines the general enlargement
of the icons when the viewport is changed, default is 8 */

.fsi-skin-example .fsi-ui-info {
  content: '{"floatingMenuBar":true, "floatingNavWindow":false, "baseEnlargement":10}';
}

/* the main menu bar container */
.fsi-skin-example .fsi-ui-menu-bar {
  background: rgba(255, 255, 255, 0.8);
}

/* The logo displayed in the menu bar.
Custom logos need to be placed into the /fsi/web/viewer/skins/resources/ folder of
your FSI Viewer installation.
NOTE: Originally, this is defined in the fsi-viewer-core.css.
Since the core css files should not be altered, please overwrite the classes from
there in tyour custom skin CSS. */
.fsi-viewer-root .fsi-skin-example .fsi-ui-logo-image {
  background-image: url("[fsi-skin-path]resources/custom_logo.svg");
  width: 3.2em;
  height: auto;
  margin-left: 0.15em;
}

/* defines the position of the loading animation */
.fsi-skin-example .fsi-viewer-loading-animation {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* the base button class */
.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;
}

/* styles 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);
}

/* styles for pressed buttons */
.fsi-skin-example .fsi-ui-button-active {
  border: 1px solid rgba(56, 176, 170, 0.2);
  background: #ffffff;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* the base button icon class */
.fsi-skin-example .fsi-ui-button-icon {
  color: #33b1aa;
}

.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;
}

/* select frame */
/* PSEUDO CLASS, only these 2 values will be read */
.fsi-skin-example .fsi-ui-select-frame {
  border-color: #33b1aa;
  background-color: rgba(255, 255, 255, 0.25);
}

/* progress bar displayed when loading image sequences */
/* PSEUDO CLASS, only these 3 values will be read */
.fsi-skin-example .fsi-ui-progressbar {
  color: #33b1aa;
  background-color: rgba(255, 255, 255, 0.5);
  border-color: #999;
}

/* PSEUDO CLASS, only the color values will be read */
.fsi-skin-example .fsi-ui-progressbar-text {
  color: #555;
}

/* tool tips */
.fsi-skin-example .fsi-ui-tool-tip {
  color: #4d4d4d;
  background-color: rgba(255, 255, 255, 0.8);
  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;
}

/* navigation window */
.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);
}

/* PSEUDO CLASS, only these 2 values will be read */
.fsi-skin-example .fsi-ui-nav-frame {
  border-color: #33b1aa;
  background-color: rgba(255, 255, 255, 0.35);
}

/* the text 0.0% to 100.0% below the nav window image */
.fsi-skin-example .fsi-ui-nav-window-zoom-text {
  color: #4d4d4d;
}

/* HotSpots */
.fsi-skin-example .fsi-ui-hotspot {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 1.0);
  border-radius: 2px;
  background-color: rgba(88, 168, 255, 0.85);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.fsi-skin-example .fsi-ui-hotspot-hover {
  background-color: rgba(88, 168, 255, 1.0);
}

.fsi-skin-example .fsi-ui-hotspot-active {
  background-color: rgba(88, 168, 255, 1.0);
}

.fsi-skin-example .fsi-ui-hotspot-line-color {
  color: #336699;
}

.fsi-skin-example .fsi-ui-hotspot-line-background-color {
  color: #113399;
}

/* dialogs */
.fsi-skin-example .fsi-dialog {
  border: 0px none;
  background-color: #FFF;
  color: #206662;
}

.fsi-skin-example .fsi-dialog input[type="button"] {
  font-size: 14px;
  color: #666;
  border: 1px solid #eee;
  background-color: transparent;
}

.fsi-skin-example .fsi-dialog input[type="button"]:hover {
  color: #206662;
  background-color: #EEE;
}

/* 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;
}

Please note that you need to use XML syntax in order to avoid XML syntax errors in configuration files - this is e.g. using <br/> instead of <br>.