Customize the page indicator

Q: How can I change the page indicator arrows and inputs background color?

A: You can easily customize the page indicator using the corresponding public CSS classes. The CSS classes involved in customizing the page indicator are:

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

Copy
1
2
3
4
5
6
7
8
9
10
11
12
// 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 those indicators by setting it directly like so:

1
2
3
4
5
.PSPDFKit-Page-Indicator-Prev,
.PSPDFKit-Page-Indicator-Next,
.PSPDFKit-Page-Indicator-Input {
  background-color: blue;
}

In order to be able to customize CSS styles, the recommended, 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:

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

This has been tested with PSPDFKit for Web 2020.3.0.