Results 1 to 7 of 7

Threaded View

  1. #1
    Join Date
    Feb 2003
    Location
    Connecticut
    Posts
    5,460

    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.
    Last edited by Akash; 01-21-2004 at 09:27 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •