Section:

Customizing WebViewer UI Styles

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

Modular WebViewer UI

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

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

JavaScript

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

CSS

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

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.

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

Applying the :host CSS selector with WebViewer WebComponent

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.

JavaScript

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

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

CSS

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

WebViewer with new background color and changed icon color

Apryse Docs Image

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales