Printer Friendly

[slabadoo]

I have scoured the forum for a Printer Friendly Solution. A couple link to the contributes page but I can't seem to find the Contribution for the Print Friendly Function.

Perhaps I am blind but in any case. I have a print button in tpl_main_page.php that triggers a print function (javascript not sure if this is a the correct way to call the print function, Would like to know the best way to call it in Zen-Cart) but anyway, I would like it to print the content of the page, (PRINTER FRIENDLY, No columns. I am sure it is somehow done using the print.css file somehow.

Any takers???
Thanks,
Slabadoo

[BlindSide]

It's a lot easier than you think. Add this to your CSS:

.noprint {}

@media print {
  .noprint {display: none}
}

Then, just add the "noprint" class to any web element that should not appear on a printout, like so:

<div class="navigation rightFloat noprint">Navigation Box</div>

You could even go a step further and set a CSS style for elements that should only appear when printed:

.noprint {}
span.printonly, div.printonly {
  display: none;
}
@media print {
  .noprint {display: none}
  span.printonly {display:inline}
  div.printonly {display:block}
}

[slabadoo]

Tried it, For some reason I can't get the area of the page I want to print. Even if i use the browsers default print and choose print preview, it doesn't show the stage area. See example:

Example

Thanks,
Slabadoo

[paulm]

Then, just add the "noprint" class to any web element that should not appear on a printout, like so:

<div class="navigation rightFloat noprint">Navigation Box</div>

Actually one of the nice things about CSS is that you don't need to edit the HTML (and thus PHP in this case) anymore. That is if classes and id's have been added at the right places.

Anyway, it's better to do it like this:

<div class="navigation rightFloat">Navigation Box</div>

Do not edit the HTML/PHP! The div already has a class so there is no need to add one (to be more precise, it already has one class to many tmho ;-) )

Instead edit the stylesheet only, and for example add:

@media print {
  .navigation, . some-other-class, #an-example-id {display: none}
}

You can add classes and id's as you like. Now if you change your mind, and decide that you do want to show the contents of some-other-class after all for example, you only need to edit the CSS again:

@media print {
  .navigation, #an-example-id {display: none}
}

Of course the style "display: none;" is just an example too, most styles used for display can be used for @media print as well.


Note: as far as I know you can't make visible what's within a hidden area using CSS. And backgrounds usually are not printed (depends on client settings).

[slabadoo]

So, using the Example link i posted, here is the source of that section

<!-- bof  breadcrumb -->
<!-- eof breadcrumb -->

<!-- bof upload alerts -->
<!-- eof upload alerts -->
<div class="centerColumn" id="indexCategories">
<h1 id="indexCategoriesHeading">Bar Rails</h1>

<!-- BOF: Display grid of available sub-categories, if any -->
    <div class="categoryListBoxContents" style="width:33&#37;;"><a href="<A href="http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_10"><img">http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_10"><img src="images/categories/BRR123001FS_thumb.JPG" alt="BRR123001" title=" BRR123001 " width="76" height="57" /><br />BRR123001</a></div>
    <div class="categoryListBoxContents" style="width:33%;"><a href="<A href="http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_13"><img">http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_13"><img src="images/categories/BRR123001FS.JPG" alt="BRR123001TBA" title=" BRR123001TBA " width="76" height="57" /><br />BRR123001TBA</a></div>
    <div class="categoryListBoxContents" style="width:33%;"><a href="<A href="http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_11"><img">http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_11"><img src="images/categories/BRR123001FS.JPG" alt="BRR125501A" title=" BRR125501A " width="76" height="57" /><br />BRR125501A</a></div>
<br class="clearBoth" />
    <div class="categoryListBoxContents" style="width:33%;"><a href="<A href="http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_14"><img">http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_14"><img src="images/categories/BRR123001FS.JPG" alt="BRR134301A" title=" BRR134301A " width="76" height="57" /><br />BRR134301A</a></div>
    <div class="categoryListBoxContents" style="width:33%;"><a href="<A href="http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_12"><img">http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_12"><img src="images/categories/BRR123001FS.JPG" alt="BRR156501A" title=" BRR156501A " width="76" height="57" /><br />BRR156501A</a></div>
    <div class="categoryListBoxContents" style="width:33%;"><a href="<A href="http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_15"><img">http://63.134.211.132/catalog2/index.php?main_page=index&amp;cPath=6_15"><img src="images/categories/BRR123001FS.JPG" alt="BRR156601A" title=" BRR156601A " width="76" height="57" /><br />BRR156601A</a></div>
<br class="clearBoth" />
 
<!-- EOF: Display grid of available sub-categories -->
</div>
</td>

In my stylesheet, i have placed:

@media print {
  .categoryListBoxContents {display: none}
}

I know I am doing something wrong, could you point it out to me?

Thanks,
Slabadoo

[paulm]

Can't you post a link to the shop itself? Or is it local? An image does not give that much info about the actual HTML and CSS.

[slabadoo]

This will get you there via a redirect

Click Here

Thanks,
Rick

[DrByte]

Remember, Zen Cart v1.3.x has automatic support for "print" stylesheets.
Check out the "print_stylesheet.css" file in your css folder.