Some test text!

Hamburger Icon

Web / Guides / Styles

Customizing WebViewer UI Styles

WebViewer UI supports style customizations using an API or through a CSS file.

Changing color theme

See this guide for more information about changing the theme.

Changing CSS properties

If you want to change more CSS properties, you can use a custom stylesheet to define them using normal CSS selectors.

To make the customization easier and consistent, WebViewer UI provides 5 top level classes:

  • Button
  • Panel
  • Overlay
  • Popup
  • Modal


  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  css: 'path/to/stylesheet.css'
}, document.getElementById('viewer'));
.Button.Icon {
  color: red;
} {
  transition: all ease 0.5s;

Accessing DOM directly

WebViewer's UI will be loaded inside an iframe, so to access the UI DOM elements you can use the iframeWindow property.

  // ...
}).then(instance => {
  const iframeDoc = instance.UI.iframeWindow.document;
  const zoomOverlay = iframeDoc.querySelector('[data-element="zoomOverlay"]');

Get the answers you need: Chat with us