CSS Customization

PSPDFKit for Windows allows you to customize many parts of the UI that come as part of the SDK. This includes a number of supported public CSS classes borrowed from PSPDFKit For Web, which you can use to apply custom styling to. The up-to-date list of customizable elements can be found in the CSS section of our Web API documentation.

How to Use CSS to Customize the Appearance

Let’s say you want to change the background color of the toolbar. If you look through our Web CSS API documentation, you will find a section dedicated to all toolbar-related styling. You can use your mouse to move over the elements you want to style. For example, if you move over the toolbar, you’ll see the associated CSS class, .PSPDFKit-Toolbar.

  1. With this information in mind, you can create a new stylesheet that overwrites the properties. For this example, you only want to change the background color. The first step is to add the stylesheet to your assets.
Add a CSS file to your project
  1. Now you can populate this stylesheet with values to change the background color of the toolbar:
1
2
3
4
/* my-pspdfkit.css */
.PSPDFKit-Toolbar {
  background-color: #f00;
}
  1. Then you have to pass the CSS when declaring the PdfView XAML element in order to override the default styling:
Copy
1
2
3
4
<ui:PdfView
    License="{StaticResource PSPDFKitLicense}"
    PdfUriSource="ms-appx:///Assets/pdfs/default.pdf"
    Css="ms-appx-web:///Assets/css/my-pspdfkit.css"/>

Now all the CSS elements will be applied and you should see the following:

Copy
1
2
3
4
5
<img
  class="shadow"
  alt="Toolbar with configured background color"
  src="/images/guides/web/customizing-the-interface/css-customization/customized-toolbar-e85fea8d.png"
  width="795">

How to Change General Colors the Simple Way

Rather than having to set all the colors by hand, we’ve also made it possible to set some of the main colors on the fly. First, import the default CSS file from the SDK and override color variables:

Copy
1
2
3
4
5
6
7
@import url("../pspdfkit/windows.css");

:root {
  --primary: #61d800; /* Highlight or hover color. */
  --primary-dark-1: #09af00; /* Color for the main toolbar */
  --primary-dark-2: #008b00; /* Color for the secondary toolbar */
}

The code above demonstrates the ability to set the main toolbar color, the highlight color, and the secondary toolbar color, which is adequate for most use cases. If required, you can add additional CSS modifications as well.

You will now have to pass in the CSS file as explained in step three from the previous section.