Support Center

Custom CSS Styles

Last Updated: Jan 02, 2014 02:34PM PST

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

/* Hides the Page Title and Source URL */

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

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.

/* 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 3: Get the PrintFriendly Button

   

 

support@printfriendly.com
http://assets01.desk.com/
printfriendly
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete