02. Adding Custom CSS to Designs

The easiest way to customize a PDF’s look, besides using the design’s options, is to add some custom CSS. This is a good way to make relatively small changes to the design with the least code.

When creating PDFs with the Pro Print Service, the CSS is actually read by a program called Prince, which has extra features for print. You might want to become familiar with Prince’s documentation.

To add custom CSS to a design, go to the design’s editing page. The “Custom CSS” is at the bottom.

The custom CSS for a design

CSS code entered here will only be used on the PMB Pro Print Page to make the PDF, nowhere else on your site.

Examples of Custom CSS

In order to override the design’s styles, these examples add @media print, screen {...}. You can alternatively use !important after any property to override the design’s styles.

You may want to become familiar with PMB Pro’s Print Page’s HTML structure and CSS classes when creating your CSS selectors.

This snippet changes hyperlinks to be gray and not underlined.

@media print, screen {
    a{
        color:gray;
        text-decoration:none;
    }
}

Make Part Titles Bigger

This makes the part titles bigger than article titles by selecting for pmb-part

@media print, screen {
    .pmb-part h1.pmb-title{
        font-size:3em;
    }
}

Hide Certain Content from Printouts

Often a plugin may add content to your website that doesn’t belong in the printout. Let’s say a plugin adds a floating DIV with the CSS class megafloater, this is how you could remove it from the PMB Pro Print Page:

@media print, screen {
    .megafloater{
        display:none;
    }
}

If you find there are extra pages at the start or end of your PDF, it’s probably because there are extra HTML elements (possibly empty ones) on the print page. Using custom CSS like this to make them not display at all will remove those extra empty pages.

Float Images to the Outside of the Page

Apart of boring CSS properties that all browsers support, you can use some of the CSS properties that only Prince supports. One of those is to float content to the outside of the page margin, like so:

@media print, screen {
    .pmb-article img{
        float:outside;
    }
}

Change Background

The biggest feature of Prince’s CSS is that you can style each page, setting properties like page size, margins and margin content, backgrounds, etc.

Here we change the page’s background color:

@media print, screen {
    @page {
        background: red !important;
    }
}

An important note: because your browser doesn’t understand this CSS, when you’re viewing the Print Page in your browser, it won’t apply. Your browser will think its invalid CSS (which it is, according to its way of understanding CSS.) You will only see this CSS apply when you generate the PDF using PMB’s Pro Print Service.

You can also use background images, gradients, and even combine them (like the Buurma Whitepaper design does.)

Prince’s how-to’s apply quite well to PMB, except where it refers to using the command line tool (that’s all done on a server in the cloud, you don’t have access to the command line tool directly) and using Prince’s Javascript (PMB gets the web browser to execute Javascript instead because it’s more consistent with the rest of WordPress.)

Prince’s sample documents can also inspire ideas for how to improve the design of your projects, all of which is possible in PMB because it just produces HTML files, after that Prince operates as normal.

Please feel free to ask about further custom CSS you’d like help with.