Printer-Friendly Sites with CSS
Many sites need to use PHP and seperate templates for printer-friendly layouts. Loads of colors can often waste printer ink, and deter people from printing important content. CSS helps solve this issue without the user ever having to click an extra button.
There's two ways you can utilize printer-friendly CSS. Firstly, you can link to an off-page document by placing the following code in your <head></head>.
Code:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
The other method is to include it in another stylesheet. This is done as follows:
Code:
@media print
{
CSS HERE
}
Now, unless you are proficient in CSS, you'll want to make sure everything is covered, and no colors or images are left on your page. Copy/customize the commented code that follows into your stylesheet, or new print.css file.
Code:
* /* this selector applied to ALL elements */
{
background-color: #fff ! important; /* here, we remove the background color.
the ! important makes it so that no
other settings can over-ride it. */
border-color: #000 ! important; /* next we make sure all borders are solid black. */
color: #000 ! important; /* now, we make all text solid black, too. */
}
img /* this applies to all images */
{
display: none ! important; /* this forces all images to be transparent.
remove the ! important if you know CSS and
want to make sure some images remain. */
}
.invis
{
/* Add class="invis" to any element in your HTML that you don't want to print, such as a navigational element. */
display: none;
}
Now that you're done, simply print the page and watch as all colors and images are removed!
If anything is unclear, feel free to post and I'll try to reword/add to it. :)