Hide Print

Posted by Phil Chett on 25 Nov 2008 12:05, last edited by James Kanjo on 10 Dec 2010 02:19

Tags: hide @media print

rating: +3+x

You have created some content on a page and you would rather it wasn't printed when someone presses the PRINT button

There are two steps to doing this.
1: You have to create a Custom theme, or make a small addition to one you may of already created

In that custom theme you need to add:-

@media print
{
.NonPrintable    {  display: none;  }
}

2: The stuff that you dont want to be printed must be enclosed in a "div" -block
eg:

Lets Put a little text in here just to show you. This and the surrounding box will not be printed

[[div  class="NonPrintable" style="  border:1px solid green; width:200px;"]]
Lets Put a little text in here just to show you
[[/div]]

or a span tag:

Lets Put a little text in here just to show you. This and the surrounding box will not be printed

[[span class="NonPrintable" style="  border:1px solid green; width:200px;"]] Lets Put a little text in here just to show you. This and the surrounding box will not be printed [[/span]]

In a simple table tag this does worktoo but leaves the cell borders untouched:

header1 header2 header3 not-printed
printed printed not-printed
printed printed not-printed
||~ header1 ||~ header2 ||~ [[span class="NonPrintable"]]header3 not-printed[[/span]]||
|| printed  || printed|| [[span class="NonPrintable"]]not-printed[[/span]]  ||
|| printed  || printed ||[[span class="NonPrintable"]]not-printed[[/span]]  ||

- different to the new table - row - cell tags:

header1 header2 header3 not-printed
printed printed not-printed
not-printed not-printed not-printed
[[table style="  border:1px solid green; "]] 
[[row style="  border:1px solid green; "]] 
[[cell style="  border:1px solid green; "]]  header1 [[/cell]]
[[cell style="  border:1px solid green; "]]  header2 [[/cell]]
[[cell class="NonPrintable" style="  border:1px solid green; "]]  header3 not-printed [[/cell]]
[[/row]]
[[row style="  border:1px solid green; "]] 
[[cell style="  border:1px solid green; "]]  printed  [[/cell]]
[[cell style="  border:1px solid green; "]]  printed [[/cell]]
[[cell class="NonPrintable" style="  border:1px solid green; "]]  not-printed [[/cell]]
[[/row]]
[[row  class="NonPrintable"  style="  border:1px solid green; "]] 
[[cell style="  border:1px solid green; "]]  not-printed  [[/cell]]
[[cell style="  border:1px solid green; "]]  not-printed  [[/cell]]
[[cell style="  border:1px solid green; "]]  not-printed [[/cell]]
[[/row]]
[[/table]]

Assuming you have carried out the above correctly when you hit the PRINT button the box will still be there.
BUT When you actually print it. it will not be printed - have a check with the print-preview of your browser.

The community theme has been adjusted so that you may try this now.

This howto has been possible thanks to

Helmuti_pdorfHelmuti_pdorf. Please visit his/her userPage.

edit.

As my understanding of CSS is just cut/butcher/and paste i have learnt form another example created by SquarkSquark that some of the code i had supplied was not required, and has been adjusted to suit.
Phil Chett

edit2.

I inserted back the div tag in both code blocks - it is needed anyway to work as div-block - Helmut


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.