Question

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.

Answer 1

Simply put

.onlyprint {display: none;}
@media print {
  .onlyprint {display: block;}
}

into your CSS rules.