# I want to customize the viewer with the css file I wrote

**URL:** <https://pdfjs.community/t/i-want-to-customize-the-viewer-with-the-css-file-i-wrote/1628>\
**Category:** Technical Support\
**Created:** [April 26, 2022, 1:31am UTC](https://pdfjs.community/t/i-want-to-customize-the-viewer-with-the-css-file-i-wrote/1628 "2022-04-26T01:31:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![laneyson.dev](https://avatars.discourse-cdn.com/v4/letter/l/cdc98d/32.png) [@laneyson.dev](https://pdfjs.community/u/laneyson.dev)\
**Post date:** [April 26, 2022, 1:31am UTC](https://pdfjs.community/t/i-want-to-customize-the-viewer-with-the-css-file-i-wrote/1628/1 "2022-04-26T01:31:10Z")

</div>

using PDF.js Express Viewer.

- UI version : 8.4.1
- Core version : 8.4.0

\*\* issue \*\*  
I am currently using NPM installed in vue.js.  
I want to customize the viewer through the css file I wrote.  
However, the viewer cannot read my css file location properly.  
Please let me know if I made any mistakes.

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/86cb7e9f7fdc53dec585b6a99fa54623b25bd36a.png)  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/71b706afa272d0a9edcae3feaf996adcb1acea92.png)

**Expected behaviour**  
I have the code we created is as follows.  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/383a6abc18db3287f27bc65936fe72182aed3188.png)

In this case, I think the style should be changed as below.  
(The photo was tested by changing the style through the Chrome developer tool.)

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/f2d43bf498247ac05153fbf10261301918d40b4a.png)

But it doesn’t work.

**Does your issue happen with every document, or just one?**  
everu document.

**Link to document**

> **[PDFTRON\_about.pdf](https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf)**
>
> 2.05 MB

**Code snippet**

```javascript
<template>
  <div>
    <div ref="viewer"></div>

    <div ref="test-viewer"></div>
  </div>
</template>

<script>
import WebViewer from "@pdftron/pdfjs-express-viewer";

export default {
  name: "ExpressViewer",
  mounted() {
    WebViewer(
      {
        path: "../../dist/public/pdfjsexpress",
        initialDoc:
          "https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf", // replace with your own PDF file
        licenseKey: "VMeLR5MsW5lX3X9YfqQF",
        css: "../assets/test_style.css",
      },
      this.$refs.viewer
    ).then((instance) => {
      // at this point, the viewer is 'ready'
      // now you can access APIs through the WebViewer instance
      const { Core, UI } = instance;

      // console.log(Core.Document.cropPages([0, 1, 2], 40, 40, 40, 40));
      // Core.createDocument(
      // "https://data.polarishare.com/data/202202/40D/6bc8fa33-bd75-4437-b3b3-1b9ae4e2944f.pdf",
      // "test-viewer"
      // ).then((instance) => {
      // console.log("Core", instance);
      // instance.cropPages([1], 100, 100, 100, 100);
      // console.log("meta data", instance.getMetadata);
      // });

      UI.setHeaderItems((header) => {
        header.delete(9);
        header.unshift(
          {
            type: "customElement",
            render: () => {
              const logo = document.createElement("img");
              logo.src = "https://www.pdftron.com/downloads/logo.svg";
              logo.style.width = "200px";
              logo.style.marginLeft = "10px";
              logo.style.cursor = "pointer";
              logo.onclick = () => {
                window.open("https://www.pdftron.com", "_blank");
              };
              return logo;
            },
          },
          {
            type: "spacer",
          }
        );
      });

      document.getElementsByClassName("DocumentConatiner").background = "red";

      // const nextButton = document.getElementById("test-button");
      // nextButton.innerHTML = "Next";
      // nextButton.style.position = "absolute";
      // nextButton.style.top = "50%";
      // nextButton.style.right = "0";
      // nextButton.style.zIndex = "9999";
      // nextButton.onclick = () => {
      // instance.Core.documentViewer.setCurrentPage(
      // instance.Core.documentViewer.getCurrentPage() + 1
      // );
      // };

      // adding an event listener for when a document is loaded
      Core.documentViewer.addEventListener("documentLoaded", () => {
        console.log("document loaded");
      });

      // adding an event listener for when the page number has changed
      Core.documentViewer.addEventListener(
        "pageNumberUpdated",
        (pageNumber) => {
          console.log(`Page number is: ${pageNumber}`);
        }
      );

      // UI.setHeaderItems((header) => {
      // header.push({
      // type: "actionButton",
      // img: "https://icons.getbootstrap.com/assets/icons/caret-right-fill.svg",
      // onClick: () => {
      // const currentPage = Core.documentViewer.getCurrentPage();
      // const totalPages = Core.documentViewer.getPageCount();
      // const atLastPage = currentPage === totalPages;

      // if (atLastPage) {
      // Core.documentViewer.setCurrentPage(1);
      // } else {
      // Core.documentViewer.setCurrentPage(currentPage + 1);
      // }
      // },
      // });
      // });

      // const nextPageHandler = () => {
      // const currentPage = Core.documentViewer.getCurrentPage();
      // const totalPages = Core.documentViewer.getPageCount();
      // const atLastPage = currentPage === totalPages;

      // if (atLastPage) {
      // Core.documentViewer.setCurrentPage(1);
      // } else {
      // Core.documentViewer.setCurrentPage(currentPage + 1);
      // }
      // };
    });
  },
};
</script>

<style></style>

```

```javascript
.DocumentContainer {
  background: red;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [April 26, 2022, 1:31am UTC](https://pdfjs.community/t/i-want-to-customize-the-viewer-with-the-css-file-i-wrote/1628/3 "2022-04-26T01:31:16Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Customizing PDF.js Express Viewer - Get started](https://pdfjs.express/documentation/ui-customization/overview#get-started)
- [PDF.js Express Documentation - Our Products - PDF.js Express Viewer](https://pdfjs.express/documentation#pdf.js-express-viewer)
- [Customize color & style of viewer](https://pdfjs.express/documentation/ui-customization/customizing-styles)

APIs:
- [PDF.js Express Utilities](https://pdfjs.express/api/utils/index.html#__anchor)
- [ExpressUtils(optionsopt) - # async merge() → {Promise.}](https://pdfjs.express/api/utils/ExpressUtils.html#merge__anchor)
- [Core - enableFullPDF()](https://pdfjs.express/api/Core.html#.enableFullPDF__anchor)

Forums:
- [Pdfjs.express watermark despite licence key & correct domain](https://pdfjs.community/t/pdfjs-express-watermark-despite-licence-key-correct-domain/1592/1)
- [Cannot generate key for .gov.mv domains](https://pdfjs.community/t/cannot-generate-key-for-gov-mv-domains/1399/1)
- [I have free license key (pdf express viewer), but still showing watermark](https://pdfjs.community/t/i-have-free-license-key-pdf-express-viewer-but-still-showing-watermark/1601/1)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [April 27, 2022, 2:24pm UTC](https://pdfjs.community/t/i-want-to-customize-the-viewer-with-the-css-file-i-wrote/1628/4 "2022-04-27T14:24:30Z")

</div>

Hi there,

You marked this topic as resolved - I just want to confirm that you got everything working?

Thanks!  
Logan