I am currently using the following as my external print.css file:
/* Remove unwanted elements */
hiddenedit, #hiddenbuttons, #header, #nav, .propertyselector, li.hiddentab, ul.hiddentab { display: none; }
/* Ensure the content spans the full width */
container, #container2, #content { width: 100%; margin: 0; float: none; }
/* Change text colour to black (useful for light text on a dark background) */ .lighttext { color: #000 }
/* Improve colour contrast of links #781351 */ a:link, a:visited { color: #000 }
I understand how this works to make display: none for the items that I do not want to print on the page. My question is: How can I do the reverse of this? What would I do if there are elements on the page that I only want to be visible when the page prints, not visible when the page is viewed?
Any ideas? Thank you.
Simply put
.onlyprint {display: none;}
@media print {
.onlyprint {display: block;}
}
into your CSS rules.