Formatting Websites For Printing

Using css code for better webpage printing

Print hiding css code
The following css style code is included in the global css file(s) in all HTML5 and responsive Allwebco templates. This hides items like the menu and header icons using the .printhide class (see below on this page for some example uses).


/* HIDE MENU AND ITEMS FOR PRINTING */

@media print {
.printhide { display:none; }
.pageheight { min-height: 50px; }
}
@media screen{
.printonly { display:none; }
}


This code goes in your global css file, but may already be included. You will not want to change this code, however, you can hide elements in your HTML webpages by then adding the class="printhide" to elements in your HTML webpages.

The style class="printonly" can be added to any HTML page element you do not want to display in the browser window, but do want to have rendered in the printout (examples below).


Adding the print code
Code and examples below on this page work in any template or website including HTML5, 4.01 and responsive templates.

Older Allwebco templates are not setup specifically for printing. There are some things you can change and add to make your template pages more printable. Follow the steps outlined below.


Step #1: Remove the "screen" code
In older Allwebco templates you will see the following code near the top of each HTML page:

<link rel="StyleSheet" href="coolstyle.css" type="text/css" media="screen">

Remove only the media="screen" so it looks like this:

<link rel="StyleSheet" type="text/css" href="coolstyle.css">


Step #2: Add to your CSS file
If your template does not already have the following code, you'll want to add these "print" and "no print" css styles. Copy, and then paste the following code into your coolstyle.css or corporatestyle.css file at the bottom:

@media print { .printhide {display:none;} } @media screen{ .printonly { display:none } }

Step #3: Add "hide while printing" zones
Now you can add some "no print" zones to the HTML pages for areas you want to hide during printing.

Put these tags around anything you don't want to print out when a page is printed:

<span class="printhide">
Stuff you don't want printed here.
</span>

Or you can use a div for wide elements instead of a span:

<div class="printhide">
Stuff you don't want printed here.
</div>


Example: If you want to hide the menu on each HTML page during printing, do the following.

<div class="printhide">
<script type="text/javascript" src="menu.js"></script>
</div>

Set this up on one HTML page and do a "Print Preview" in your browser to check it. You can optionally add these no print zones in the .js files instead. See: adding items to .js files.



Optional Step #4: Add "print only" zones:
If you want an item to not show up on your HTML pages when viewed in a browser, but would like it to show up when a page is printed, use the following:

Put these tags around anything you want to print but not show on the pages:

<span class="printonly">
Extra stuff to print goes here.
</span>


Example: If you would like maybe your phone number and address to show only when a page is printed, add this somewhere in the main body of the HTML page:

<span class="printonly">
Our Company Name<br>
2257 Someroad DR.<br>
Sometown IL 60080<br>
(555) 555-5555<br>
</span>

Or using a div (with centering code) instead:

<div class="printonly" style="text-align: center;">
Our Company Name<br>
2257 Someroad DR.<br>
Sometown IL 60080<br>
(555) 555-5555<br>
</div>

Set this up on one HTML page and do a "Print Preview" in your browser to check it. You can optionally add these no print zones in the .js files instead. See: adding items to .js files.


Print setup tips from an Allwebco template user:
The following notes are from an Allwebco Execchrome template user:

Dear Allwebco, I worked on this and came up with a solution that will work. Have a look if you like... it was fairly easy. After you click on the page, just click on print preview so you can see the new layout (the text is no longer in the center of the page)

To do this, I made another css sheet called print.css and basically turned off some of the variables in that sheet. It may be something you guys offer as part of your templates at some point, as printing does function better. I also had to add some lines into the header of that html page, so unfortunately I'll have to do this for every page (don't know how to make it global).

<link rel="StyleSheet" media="screen" href="css/common-style.css" type="text/css">

<link rel="StyleSheet" media="screen" href="css/green.css" type="text/css">

<link rel="StyleSheet" media="screen" href="css/green-menu.css" type="text/css">

<link rel="StyleSheet" media="print" href="css/print.css" type="text/css">

This is my css code to add to the print.css:

.menutable { display: none; } /* THIS TURNS OFF THE PRINTING FOR THE MENU BUTTONS AT THE TOP */

.pictbackground { display: none; } /* THIS TURNS OFF THE PRINTING FOR THE HEADER LOGO */

#date-location { display: none; } /* THIS TURNS OFF THE PRINTING FOR THE DYNAMIC DATE AT THE TOP */

.sidebar-frame { display: none; } /* THIS TURNS OFF THE PRINTING FOR THE LEFT SIDEBAR */

.sidebarright-width { display: none; } /* THIS TURNS OFF THE PRINTING FOR THE RIGHT SIDEBAR */



Related Topics:
Adding Items To .js Files