Customize the Page Indicator

It’s possible to customize the page indicator using the corresponding public CSS classes. The CSS classes involved in customizing the page indicator are:

• .PSPDFKit-Page-Indicator-Prev

• .PSPDFKit-Page-Indicator-Next

• .PSPDFKit-Page-Indicator-Input

So, for example, if you wanted to change the arrow image of the “Previous” indicator, you could do it as follows:

// Hide default image.
.PSPDFKit-Page-Indicator-Prev span svg {
  display: none;
}
// Use a different background image.
.PSPDFKit-Page-Indicator-Prev span {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  );
}

You can do the same with .PSPDFKit-Page-Indicator-Next for the “Next” indicator.

You can also change the background color of the indicators by setting this information directly, like so:

.PSPDFKit-Page-Indicator-Prev,
.PSPDFKit-Page-Indicator-Next,
.PSPDFKit-Page-Indicator-Input {
  background-color: blue;
}

To customize CSS styles, the recommended and supported way is to set the path of the custom CSS rules in the PSPDFKit.Configuration object passed to PSPDFKit#load() as PSPDFKit.Configuration#styleSheets:

PSPDFKit.load({
  styleSheets: ['my-styles.css]
})

This has been tested with PSPDFKit for Web 2020.3.0.