Printer Friendly
How to make printer friendly page without php or any script? Well, to use this tutorial, your site should be designed with CSS div layers, using id or classes. In your attached stylesheet, you'll add the media attribute, like this:
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Well, now, you need to make another stylesheet, the printer-friendly one. You must make it so your design won't show up. For example, here is your body:
<body>
<div id="header"><!--Here goes your header layout --></div>
<div id="sidebar"><!--Here goes your sidebar --></div>
<div id="content"><!--Here goes your content --></div>
</body>
Then, you printer-friendly should look like this:
#header, #sidebar {
display: none;
}
#content {
font: 12pt Georgia, Arial, Helvetica, sans-serif;
text-align: justify;
}
It's recommended to use a font like Georgia or Times New Roman for printers and use points instead of pixels. Now, save your printer-friendly stylesheet. I'll name it print.css. In your document, insert:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
Don't worry, it won't appear when you go to your site. Now, try to print your site... Your layout is hidden, only content is shown! :) Try to print this site to see an example! If you're using tables, don't worry, you can do it too. Just add id="content" in the cell with your content. Don't put anything in the others (sidebar, layout images). Then, in your printer-friendly stylesheet, do it like that:
td {
visibility: hidden;
}
#content {
visibility: visible;
}
It should do it.
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)