Customizing WebViewer UI Styles

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

See this guide for more information about styling WebViewer with Modular UI.

See this guide for more information about changing the theme.

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

1WebViewer({
2  licenseKey: 'YOUR_LICENSE_KEY',
3  path: 'lib',
4  css: 'path/to/stylesheet.css'
5}, document.getElementById('viewer'));

1.Button.Icon {
2  color: red;
3}
4
5.Panel.open {
6  transition: all ease 0.5s;
7}

In WebViewer 11.0 and later, Web Components with the Modular UI is the default. However, WebViewer can still be loaded using an iframe, if desired. In versions prior to 11.0, the iframe-based implementation was the default.

Direct DOM access is supported in both approaches, but the method for accessing the DOM depends on which mode you use. Select either the Web Components tab or the iframe tab below based on your setup. The Web Component vs Iframe article provides more detail about the differences.

1WebViewer({
2  // ...
3}).then(instance => {
4  const root = document.querySelector('apryse-webviewer').shadowRoot; 
5  const topHeader = root.querySelector('[data-element="default-top-header"]');
6});

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

When using an external CSS file in WebViewer with a WebComponent and styling a custom modal panel or an existing panel, you should utilize the :host CSS pseudo-class selector.

The :host CSS pseudo-class targets the shadow host of the shadow DOM where the CSS is applied, enabling you to select the WebViewer WebComponent element.

Here’s an example of how this is used.

1WebViewer.WebCompnent({
2  css: 'path/main.css'
3}).then(instance => {
4  // ...
5});

And here is the content of our main.css file.

1.DocumentContainer {
2    background: tomato;
3}
4
5:host {
6    --icon-color: #00a5e4 !important;
7}

WebViewer with new background color and changed icon color