PDFprintfriendlySave Money & the Environment
Print Friendly and PDF

WordPress Users:

Custom CSS Styles

Step 1: Create a printfriendly.css Stylesheet

Using a text editor(NotePad, TextEdti), create a file and save as printfriendly.css. Or, download this default printfriendly.css file.

Step 2: Upload The CSS File To Your Server

Put your printfriendly.css file with your other CSS files on your server. If you don't have a server, you can use a public location like dropbox.

Step 3: Override PrintFriendly defaults using CSS specificity 



Target HTML Elements with #PrintFriendly

Note: Most print drivers do not print background colors and some will change font colors to black. To override use the following CSS in your PrintFriendly Custom CSS file.

/* Print Background Colors and Colorful fonts */

@media print {
   body #printfriendly { -webkit-print-color-adjust: exact;}
}

/* Aligns images to the left */

#printfriendly img{
    float:left;
    margin-top: 12px;
    margin-right: 12px;
}

/* Changes font family and size */

#printfriendly {
    font-family: Arial;
    font-size: 14px;
}

/* Changes header color */

#printfriendly h1, #printfriendly h2, #printfriendly h3, #printfriendly h4 {
    color: Green;
}

/* Hides the Page Title and Source URL */

#printfriendly #pf-src {
    display:none;
}

/* Reduce Margin in PDF */

#printfriendly .pdf-border{
padding:0!important;
}

Step 4: Put the URL to Your Stylesheet in PrintFriendly Plugin/Button Settings