Printer-friendly pages without a module
Previous article Next articleThere is really no need for a module to create printer-friendly pages at your CMS Made Simple™ website. In the upcoming 2.0 release of CMSMS™ the CMS_Printing module won't be included anymore in the default install... In this tutorial I will show you how you can do this!
How to use
Add to the <head> section of your HTML-template
{$printerfriendly = $smarty.get.printerfriendly|default:''}
{if $printerfriendly == 'true'}<script type="text/javascript">window.print();</script>{/if}
{if $printerfriendly == 'true'}<script type="text/javascript">window.print();</script>{/if}
Add the print button to the content of your HTML-template
<a class="noprint" href="{$smarty.server.REQUEST_URI}?printerfriendly=true" rel="nofollow">
Print this page
</a>
Print this page
</a>
Because I don't want these pages/URL's appear in the search engines results (or get a double content penalty) I added rel="nofollow" to the link. It tells search engines to not follow and index these URL's.
Sample stylesheet attached to your HTML-template(s)
@media print {
/* Hide blocks on the print output */
#header,
#navigation,
#footer,
h1,
.btn,
.video,
.noprint {
display: none;
}
/* Change template and content styling suitable for printing on plain paper */
body {
height: auto;
background: #fff;
color: #333;
}
a:link, a:visited, a:active {
color: #333;
text-decoration: underline;
}
h2, h3 {
padding-bottom: 1px;
border-bottom: 1px solid #000;
color: #000;
}
h4, h5, h6 { color: #000 }
}
/* Hide blocks on the print output */
#header,
#navigation,
#footer,
h1,
.btn,
.video,
.noprint {
display: none;
}
/* Change template and content styling suitable for printing on plain paper */
body {
height: auto;
background: #fff;
color: #333;
}
a:link, a:visited, a:active {
color: #333;
text-decoration: underline;
}
h2, h3 {
padding-bottom: 1px;
border-bottom: 1px solid #000;
color: #000;
}
h4, h5, h6 { color: #000 }
}
Hide other content with the noprint class in your (module) templates
<div id="example" class="noprint">
This content is shown on the screen, but it is NOT printed!
</div>
This content is shown on the screen, but it is NOT printed!
</div>
Alternative method
You can also choose for simply changing the default stylesheets by one seperate printing stylesheet. Don't attach this stylesheet to any HTML-template.
{$printerfriendly = $smarty.get.printerfriendly|default:''}
{if $printerfriendly == 'true'}
{cms_stylesheet name='print'}
<script type="text/javascript">window.print();</script>
{else}
{cms_stylesheet}
{/if}
{if $printerfriendly == 'true'}
{cms_stylesheet name='print'}
<script type="text/javascript">window.print();</script>
{else}
{cms_stylesheet}
{/if}
Working example
Comment Form
ReviewManager
ReviewManager
0 Comments
No comments yet...
Printer-friendly pages without a module
Article optimized for CMSMS 2.x
Author: RolfLast tested in: CMSMS 2.2.19
Last updated: 10-06-2019
Comments: 0
http://cms.ms/c1vR
