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. 

• Upload the CSS file to your web-server (WordPress instructions). You can also use a public dropbox or google-drive folder.

​

Step 2: Override PrintFriendly defaults using CSS specificity 

Target HTML Elements with #PrintFriendly


/* This will align 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;
}


2) Class/ID names

This method isn't recommended, but may work with your site. We try to maintain your Class and ID names in the HTML structure. So, you can target CSS styles using your class or id names.

/* This gives a border to a box */

.my-custom-class-name {
    border: 1px solid red;
}

3) !important

Last resort, add !important to a style.

p {
    font-size: 14px;!important
}

 

Step 3: Get the PrintFriendly Button

 

• Get the PrintFriendly & PDF button, the WordPress Print Friendly & PDF Plugin, or the Drupal Print Friendly & PDF module.
•  In the Print/PDF features, include the URL to your custom CSS.