Update styling in beta UI

30 views
Skip to first unread message

Matt Parizeau

unread,
Jul 4, 2018, 8:33:28 PM7/4/18
to PDFTron WebViewer
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;
}

Reply all
Reply to author
Forward
0 new messages