Hiding the embedder’s border or changing color/styles

It should be possible to override the border color by adding something like this to your Theme’s styles:

/* CHANGE BORDER COLOUR */
div.pdfemb-viewer {
    border: 1px solid red !important;
}Code language: CSS (css)

To hide the border, you would use:

/* HIDE BORDER */
div.pdfemb-viewer { 
     border: none !important; 
}Code language: CSS (css)

To change the color of the toolbar, you would use:

/* CHANGE TOOLBAR COLOUR */
div.pdfemb-toolbar {
    background-color: red !important;
}Code language: CSS (css)

To hide the toolbar, you could try:

/* HIDE TOOLBAR */
div.pdfemb-toolbar {
   display: none !important;
}Code language: CSS (css)

Change the colour of important toolbar buttons:

/* CHANGE FS BUTTON TO MAKE IT MORE OBVIOUS TO MINIMIZE */
button.pdfemb-fs.pdfemb-toggled {
    background: red !important;
}
button.pdfemb-fs.pdfemb-toggled:hover {
   background: darkred !important;
}Code language: CSS (css)

/* CHANGE DOWNLOAD BUTTON COLOUR */
div.pdfemb-toolbar button.pdfemb-download {
	background-color: red !important;
}
div.pdfemb-toolbar button.pdfemb-download:hover {
	background-color: darkred !important;
}Code language: CSS (css)

Change the colour of links embedded in the PDF when interacted with (colours listed are defaults):

/* CHANGE COLOUR OF LINKS ON HOVER IN DOCUMENT */
.pdfembAnnotationLayer .linkAnnotation > a:hover {
    opacity: 0.5 !important;
    background: yellow !important;
    box-shadow: 0px 2px 10px yellow !important;
}Code language: CSS (css)

Change the style of the scrollbars (this has limited support across browsers):

/* Works on Firefox */
.pdfemb-pagescontainer {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: blue orange; /* scroll thumb and track */
}

/* Works on Chrome, Edge, and Safari */
.pdfemb-pagescontainer::-webkit-scrollbar {
  width: 12px; /* width of the entire scrollbar */
}

.pdfemb-pagescontainer::-webkit-scrollbar-track {
  background: orange; /* color of the tracking area */
}

.pdfemb-pagescontainer::-webkit-scrollbar-thumb {
  background-color: blue; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid orange; /* creates padding around scroll thumb */
}Code language: CSS (css)

Of course, you might need to ask your web designer to help if you’re not sure where to add that for your particular site. The best arrangement is to have a child theme and to add the above code to the style.css there, but the easiest method is to paste the code into Appearance -> Customize -> Additional CSS.

PDF Embedder Documentation