
WordPress Users:
- How to upload a CSS file to WP
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 */
.pdf-border #printfriendly{
padding:0!important;
}
Step 4: Put the URL to Your Stylesheet in PrintFriendly Plugin/Button Settings
- In Button/Plugin settings, include the URL to your custom CSS.
- Get the PrintFriendly & PDF button, the WordPress Print Friendly & PDF Plugin, or the Drupal Print Friendly & PDF module.