Customizing PDF Viewer Styles

Want the PDF viewer to blend into your site’s design? PDF Embedder’s viewer is fully stylable: you can change the toolbar color, hide the border, remove the toolbar entirely, center the viewer, or float content alongside it. All of these customizations use CSS or PHP snippets that you add to your site.

This guide covers the most common style adjustments and how the free and Premium versions handle CSS differently.

---

Free vs. Premium: how styles are injected

The approach for adding custom styles differs between the free and Premium versions. Premium loads the PDF inside an <iframe>, so styles must be injected inside that iframe, not at the page level.

Use the correct hook for your version:

/* FREE version — injects styles on the page */
add_action( 'wp_footer', static function() {
	?>
	<style>
	/* Your custom CSS here */
	</style>
	<?php
} );
Code language: JavaScript (javascript)

/* PREMIUM version — injects styles inside the iframe */
add_action( 'wp_pdf_viewer_footer', static function() {
	?>
	<style>
	/* Your custom CSS here */
	</style>
	<?php
} );
Code language: JavaScript (javascript)

Add PHP snippets using one of the following methods:

Using WPCode (recommended): Install the free WPCode plugin, go to Code Snippets > Add Snippet, paste the code, and activate it.

Adding to functions.php: Add the code to your active theme’s functions.php file.

For classic themes, you can also add plain CSS (without the PHP wrapper) directly via Appearance > Customize > Additional CSS.

Centering the viewer

By default, the viewer fills the available content width. If you set a fixed width smaller than the content area, the viewer left-aligns. To center it:

/* FREE */
div.pdfemb-viewer {
    margin: 0px auto !important;
}
Code language: CSS (css)

For block themes, an alternative without custom CSS: wrap the PDF Embedder block inside a Group block and set the Group block to center its content.

The margin: auto approach may not work depending on your theme’s layout. If centering does not take effect, a web developer may need to inspect your theme’s CSS to identify conflicting rules.

Wrapping content alongside the viewer

To float text or other content alongside the embedded PDF, set a fixed width on the viewer, either globally in Settings > PDF Embedder or via the width attribute on the individual shortcode (see the Shortcode Attributes guide), then apply a float using a custom CSS class.

Step 1: Add the CSS class

.left {
    float: left;
    margin-right: 10px; /* pushes text away from the viewer */
}
Code language: CSS (css)

Step 2: Wrap the shortcode in a div in the HTML editor

<div class="left">
    [pdf-embedder url="url-to-file.pdf"]
</div>Code language: JavaScript (javascript)

Switch to the Text tab in the classic editor (or a Custom HTML block in Gutenberg) to add the <div> wrapper. The PDF viewer floats left, and any following content wraps to its right.

Changing the toolbar background color

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

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

Replace red with any valid CSS color value.

Changing the viewer border color

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

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

Hiding the viewer border

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

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

Hiding the toolbar with CSS

The plugin’s settings panel includes a toolbar visibility option, but you can also hide it via CSS:

/* FREE */
.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)

The second rule in each version shifts the PDF content up to fill the space the toolbar occupied.

Fixing fullscreen display inside frames (LearnPress and similar)

When the PDF fullscreen view appears stuck inside a page frame rather than expanding as a proper overlay (a known issue with LearnPress lesson templates), add this CSS:

/* FORCE FULLSCREEN TO IGNORE FRAMES */
.pdfemb-fsp-wrapper {
    z-index: 999999 !important;
}
Code language: CSS (css)

Styling the “View in Fullscreen” button

To change the appearance of the fullscreen launch button on mobile:

/* CHANGE STYLE OF VIEW IN FS BTN */
div.pdfemb-wantmobile-fsarea {
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
    border: 2px solid #363600 !important;
    background-color: #C5BDCF !important;
    -webkit-box-shadow: #B3B3B3 8px 8px 8px !important;
    -moz-box-shadow: #B3B3B3 8px 8px 8px !important;
    box-shadow: #B3B3B3 8px 8px 8px !important;
    color: black !important;
    font-family: sans-serif !important;
    letter-spacing: 2px !important;
    font-size: 16px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
Code language: CSS (css)

The !important declarations are included to ensure your values override the plugin’s default styles.

Positioning the watermark at the top of the page

By default, the watermark is centered vertically on the page. To move it to the top, add this jQuery snippet to your site:

jQuery('.watermark').parent().css('top', 0);
Code language: PHP (php)

Add this inside a <script> tag using the WPCode plugin or your theme’s footer script area.