From the Knowledgebase

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;
}

To hide the border, you would use:

/* HIDE BORDER */
div.pdfemb-viewer { 
     border: none !important; 
}

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

/* CHANGE TOOLBAR COLOUR */
div.pdfemb-toolbar {
    background-color: red !important;
}

To hide the toolbar, you could try:

/* HIDE TOOLBAR */
div.pdfemb-toolbar {
   display: none !important;
}

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;
}

/* 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;
}

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;
}

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 */
}

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.

Top