How to modify PDF Viewer styles?

With various code snippets you can modify the way the PDF Viewer is displayed on your page, so you can tailor it closer to the styling of your theme.

Depending whether you are using a free or paid version of the plugin, you should be using different hooks.

Technically, it is possible to override styles for the free version (which is hosted on WordPress.org) using your theme style.css file, but for consistency we would recommend using a PHP approach, as this way you avoid future frustration of trying to understand where the code is loaded from and what does it apply to.

So, if you are using a free version of the plugin, you need to use this PHP code snippet to embed your custom CSS styles:

add_action( 'wp_footer', static function() {
	?>
	<style>
	.pdfemb-viewer .pdfemb-toolbar {
		background-color: red;
	}
	</style>
	<?php
} );Code language: PHP (php)

And here is the same (functionality-wise) code snippet for any Premium version:

add_action( 'wp_pdf_viewer_footer', static function() {
	?>
	<style>
	#wppdf-iframe-body .toolbarViewer {
		background-color: red;
	}
	</style>
	<?php
} );Code language: PHP (php)

There are several important things here:

1. the main hooks is different.
   Premium version load the PDF inside an <iframe>, which requires you to inject your styles not on the page where the PDF Viewer is rendered, but inside the iframe itself.
2. CSS classes may be different, so you may need to inspect your PDF Viewer to understand what you need to modify.

In the example above, we are overwriting the background color of the Toolbar from a default one to red.

Examples of other CSS overrides

Remember, you should only pick one, either Lite or Premium CSS snippet – depending whether you have Premium activated or not.

So if you do have Premium installed and activated – you must use the Premium snippets.

Change PDF Viewer border color:

/* Lite: */
.pdfemb-viewer {
    border-color: red;
}

/* Premium: */
#wppdf-iframe-body {
	border-color: red;
}Code language: CSS (css)

Hide PDF Viewer border:

/* Lite: */
.pdfemb-viewer { 
     border: none !important;
}

/* Premium: */
#wppdf-iframe-body {
     border: none !important;
}Code language: CSS (css)

Hide PDF Viewer toolbar using CSS:

Even though you have plugin options for that, here are is the snippet to accomplish the same thing with CSS:

/* Lite: */
.pdfemb-toolbar {
	display: none;
}
.pdfemb-viewer .pdfemb-pagescontainer {
	top: 0 !important;
}

/* Premium: */
#wppdf-iframe-body #viewerContainer.toolbar-top,
#wppdf-iframe-body #viewerContainer.toolbar-both {
	top: 0 !important;
}
#wppdf-iframe-body .toolbar {
	display: none;
}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.