Customizing the UI

The WebViewer UI is completely customizable. It includes convenience APIs and options for simple customizations but the ability to change any aspect of the DOM for more complicated customizations.

WebViewer constructor options

  • hideAnnotationPanel: If set to true the annotation panel on the right side of the viewer will be hidden. Default is false.
  • showToolbarControl: If set to false then the top toolbar will be hidden. Default is true.

You would use these options as follows:

var myWebViewer = new PDFTron.WebViewer({
  hideAnnotationPanel: true,
  showToolbarControl: false
}, viewerElement);

ReaderControl.config options

These options allow you to hide and show several UI controls. You can use the following code in a config file:

// hide all the main UI elements
$.extend(ReaderControl.config.ui, {
  hideAnnotationPanel: true,
  hideControlBar: true,
  hideSidePanel: true
});

// hide elements on top toolbar
$.extend(ReaderControl.config.ui, {
  hideDisplayModes: true,
  hideZoom: true,
  hideTextSearch: true,
  hidePrint: true
});

Updating CSS

You can use the ReaderControl.config.customStyle setting to load a custom CSS file or files.

ReaderControl.config.customStyle = '/custom.css';

// or multiple files
ReaderControl.config.customStyle = ['/custom1.css', '/custom2.css'];

To see which class, id or element names to target you can inspect the DOM. For example in Chrome you can right-click on an element and select "Inspect".

Adding/Modifying elements with JavaScript

The customization sample shows some examples of adding new buttons to the top toolbar dynamically. Here is a snippet:

var rightAlignedElements = $('#control .right-aligned');
var container = $('<div>').addClass('group');
rightAlignedElements.append(container);

var button = $('<span>').attr({
    'id': 'optionsButton',
    'class': 'glyphicons circle_info'
})
.on('click', function() {
  console.log('button clicked');
});

container.append(button);

Similarly you can modify existing elements by inspecting them in the DOM to get their id and then selecting them using jQuery or DOM selectors and changing their properties or moving them around in the DOM.

Updating HTML

If the change that you want to make is too complicated it may be easiest to add new HTML directly in ReaderControl.html. You can find this file in lib/html5/ReaderControl.html.