Some test text!

Loading...
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

Example

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

.Panel.open {
  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.

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

Get the answers you need: Support

UPCOMING WEBINAR: "2021 in review: Top five new & updated features" Dec 9th @ 11am PT