Hide Elements For Printing

Hide elements from the printed pages

Some of the styles you create will be for online use only, like a web site header that might contain a drop down menu, bread crumbs, login link, navigation links, .... The CSS print media type makes it easy to remove those elements from your printed pages.

Sytlesheets used in Tópico have a @media print{} section at the bottom to override screen selectors with print selectors. Here's how this section looks like:

			@media print{
			div#page {width:100%; border:0px;}
			div#header {display:none;}
			div#breadcrumb {display:none;}
			div.navigation {display:none;}
			div#navleft {display:none;}
			div.back {display:none;}
			div#content {width: 100%; border:0px;}
			div#left {display:none;}
			div#main {width:96%; margin-left:0px; background:white; border:0px;}
			div.clickimage {display:none;}
			div#footer {display:none;}
			span.online {display:none;}
			div.online {display:none;}
			span.print {display: inline;}
			div.print {display: block;}
			}		

The above selectors have the following effects:

• Set the page and content elements width to the full with of the printed page;
• Hides the header, menubar and breadcrumb from the printed version;
• Set the visibility of the elements with the online and print classes.

To define a print selector differently than the same online selector, add the print version of the selector between the @media print{} brackets.

As an example, Tópico also defines the following online and print classes:

span.online {display:inline;}
div.online {display:block;}
span.print {display: none;}
div.print {display: none;}

@media print{
 span.online {display:none;}
 div.online {display:none;}
 span.print {display: inline;}
 div.print {display: block;}
}

Once you've created your custom tags, you can then modify their online and print appearance separately.