Setting up your template for better printing

Formatting a Template For Printing

Most 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:
On most 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: Edit your CSS file:
Now you may want to add hidden "print" and "no print" zones. Add the following to your coolstyle.css or corporatestyle.css file at the bottom if you do not have this now:

Step #3: Add "hide while printing" zones:
Now you will want to 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:


Stuff you don't want printed in the middle.


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


<script language="JavaScript" src="menu.js"></script>


You can set this up on one HTML page and do a "Print Preview" in your browser to check this. You can also add these no print zones to the .js files as well. Click here for help with 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 but would like them 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:


Extra stuff to print goes here.


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


Our Company Name 
2257 Someroad DR. 
Sometown IL 60080. 
(555) 555-5555 


You can set this up on one HTML page and do a "Print Preview" in your browser to check this. You can also add these no print zones to the .js files as well. Click here for help with adding items to .js files.

Print setup tips from an Allwebco template user:
This is an email for template print setup a template user used on an Execchrome template:

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) [ click to view website ]

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

Allwebco Web Templates
Complete websites with built in scripts.
AllwebcoDesign.com

Free Javascripts
Free scripts for any website or template.
Allwebco-Templates

SE Optimization
Help to list better in search engines.
Allwebco-Templates

Shopping Cart Templates
Professional templates with built-in Paypal.
AllwebcoDesign.com