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.
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.
Change Hyperlink Color
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.)
Modify Page Margins
If the design you’re using doesn’t have settings to control page margins, custom CSS can help. The following CSS makes the left margin 2cm wide and the right margin 3cm wide, and it also removes any generated content from the top-left corner (useful if your design adds content to that region.)
@media print, screen {
@page {
@top-left { content: none }
margin-left: 2cm;
margin-right: 3cm;
}
}Prince’s documentation on paged media will let you know what custom CSS you can use.
Modify Page Margins on Left vs Right Pages
In addition to the previous example, you can also differentiate between how inside and outside margins should be treated. (E.g., having the inside margins bigger.)
This custom CSS makes the inside margins 3cm wide while outside margins 2cm wide.
@media print, screen {
@page:left {
margin-left: 2cm;
margin-right: 3cm;
}
@page:right {
margin-left: 3cm;
margin-right: 2cm;
}
}Prince’s documentation on selecting pages has more information.
More Examples from Prince
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.