Update styling in beta UI

[Matt Parizeau]

Q:

How can I update the colors of the toolbars and other UI elements in WebViewer beta UI?

A:

You can have a config file that adds a CSS stylesheet to the page and define some CSS to target different UI elements.

In your config file:

var cssLink = document.createElement('link');
cssLink.href = 'style.css';
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
document.head.appendChild(cssLink);

In your style.css

.ToolBar, .AnnotationToolsPanel, .MenuOverlay, .ViewControlsOverlay,
 .ZoomControlsOverlay, .PageNavOverlay {
  background-color: #333;
}

.Icon, .MenuOverlay, .ViewControlsOverlay,
 .PageNavOverlay, .PageNavOverlay input {
  color: lightblue;
}

.Button.active {
  background-color: #757575;
}

.Button:hover {
  background-color: #aaa;
}