Printer Friendly

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

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}
}

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

BlindSide:

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}
}

@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).

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%;"><a href="<A href="http://63.134.211.132/catalog2/index.php?main_page=index&cPath=6_10"><img">http://63.134.211.132/catalog2/index.php?main_page=index&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&cPath=6_13"><img">http://63.134.211.132/catalog2/index.php?main_page=index&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&cPath=6_11"><img">http://63.134.211.132/catalog2/index.php?main_page=index&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&cPath=6_14"><img">http://63.134.211.132/catalog2/index.php?main_page=index&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&cPath=6_12"><img">http://63.134.211.132/catalog2/index.php?main_page=index&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&cPath=6_15"><img">http://63.134.211.132/catalog2/index.php?main_page=index&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

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.

This will get you there via a redirect

Click Here

Thanks,
Rick

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

Yep! I am aware of this. I am compliant, using v1.3.x

My delima is that I only wish to print out the Stage area as shown in the image above. For the life of me, I can only get the printer to print out the header and the footer. Perhaps I am placing calling the wrong id:cry:

Thanks,
Slabadoo

You have some bizarrely mixed HTML in your template.

Your footer has mixed content which you appear to have copied verbatim from other parts of the main layout, thus ending up with duplicate id elements and a table for the footer appears to be embedded in column two code, etc.```html

<td id="navColumnTwo" class="columnRight" style="width: 219px"> <div id="navColumnTwoWrapper" style="width: 219px"></div></td> </tr> <tr> <td bgcolor="#e6e6e6" class="columnLeft" id="navColumnOne" style="width: 231px"> </td> <td valign="top"><table width="540" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="491" bgcolor="#e6e6e6"><FONT color=#cdcdcd>  <FONT face=Verdana color=#b4b4b4> <FONT color=#9a9a9a size=1>© 2007 Michael Weinig AG </FONT></FONT></FONT></td> <td width="49" bgcolor="#e6e6e6"><a href="#" onclick="window.scrollTo(0,0); return false"><IMG height=17 src="http://www.........com/navimages/top.gif" width=18 align=right border=0></A><a href="javascript:window.print()"><IMG height=17 src="http://www..........com/navimages/print.gif" width=18 align=right border=0></a></td> </tr> </table></td> <td id="navColumnTwo" class="columnRight" style="width: 219px"> </td> ```

Plus, you put your header into a table completely outside the original "headerWrapper", making it unreachable by built-in styling. This is fine as long as you add the required id's and classes to it so it can be influenced by the stylesheet.

And the main reason you're getting a blank "stage" as you call it when you try to print is because you have not retained matched tags when you edited your navigation area ... you're missing a closing </div> and therefore your whole "centerColumn" is being treated as though it's inside the "navMainWrapper" ... which is hidden for printing purposes.```html
<!--bof-navigation display-->

<div id="navMainWrapper"> <div id="navMain"> <ul class="back"> <li><a href="http://........../">Profile Catalog Home</a></li> <li><a href="http://......index.php?main_page=login">Log In</a></li> </ul> <br class="clearBoth" /> </div> <!--eof-navigation display--> <!-- bof breadcrumb --> <!-- eof breadcrumb --> <!-- bof upload alerts --> <!-- eof upload alerts --> <div class="centerColumn" id="indexCategories"> <h1 id="indexCategoriesHeading">Bar Rails</h1> ```

oh, and having this in your stylesheet will "prevent" your "stage" area from showing up, at least on that page ... note that **display: none **means ... don't show.```html
@media print {
.categoryListBoxContents {display: none}
}

Can't add much to that Drbyte :-)

Some unrelated errors in the CSS are that it contains some faulty color settings:

	color: 0000CC;

In general it's better to track down and solve all/most CSS and HTML errors first, when having "weird" problems.

OK, I added the </div> and took out the display none. Still , not printing?

Any other thoughts?

Thanks,
Slabadoo

1. get rid of this in your stylesheet.css```
   @media print {
   .categoryListBoxContents
   }

2. In this section, add another closing </div>, as shown:```
	<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><a href="http://...../">Profile Catalog Home</a></li>

    <li><a href="http://....../index.php?main_page=login">Log In</a></li>

</ul>
<br class="clearBoth" />
</div>
[B]</div>[/B]
<!--eof-navigation display-->

That should get your "stage" area printing. You can deal with the other issues separately.

**DrByte:thumbsup: **

thank you. This solved my printing problem.

Slabadoo...