Posted by Phil Chett on 25 Nov 2008 12:05, last edited by Helmut_pdorf on 16 Jan 2022 10:21
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:
[[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
Helmut_pdorf Helmut_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 Squark Squark 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
Thanks Phil for the documentation!
This works in FF and IE!
I think, the CCS level 2 command is now working in IE too…
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?