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:
// 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:
.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
:
PSPDFKit.load({
styleSheets: ['my-styles.css]
})
This has been tested with PSPDFKit for Web 2020.3.0.