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

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

Target 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.

/* Hides the Page Title and Source URL */

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

/* 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 4: Put the URL to Your Stylesheet in PrintFriendly Plugin/Button Settings