Questions/problems about the printing stylesheet

[karma-lab]

I'm assuming that when you print, your template's 'print_stylesheet.css' is supposed to come into effect. But I cannot seem to make it have any effect. And I get different results from different browsers on different OS's (Windows, Mac).

First of all, here's the print_stylesheet.css. It is located in the proper place at includes/templates/CUSTOM/css/print_stylesheet.css

/**
 * CSS Stylesheet for printing
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: print_stylesheet.css 3150 2006-03-10 19:03:51Z birdbrain $
*/
body {background-color: #ff00ff; color:#000000; }
#contentMainWrapper {display:none; background-color: #ffffff; color:#000000; }
.messageStackWarning, #navMainWrapper, .navMainSearch, #navCatTabsWrapper, #navEZPagesTop, 
#navColumnOne.columnLeft, #navColumnTwo.columnRight, 
#navSupp, .banners, #navBreadCrumb, .buttonRow { display: none;}

Purposely, I have tried to turn the page background purple, and I have set the mainContentWrapper to 'display:none', just to see if I can get anything to happen. Nothing does.

I don't want to publish the web address of the store for security reasons because it is not open to the public and is still being configured. But the store is a very dark grey background with light text (sort of reversed). For printing, I just want it to be a white background with black text everywhere. And hide the sidebars.

But the code above, which looks like it is already trying to hide the sidebars, doesn't do anything. Neither do the other changes I tried to put in just to test it.

In Windows IE 6, IE 7, and Mac Safari, I get a white pagebackground with light grey text. In FireFox (Mac) and Opera (Mac) I get the exact color of the store (black background, light text), including background pictures (which I thought were not supposed to print).

[ultralowincome]

you may have to edit the header file to add the following line of code:

<link rel="stylesheet" type="text/css" href="print_stylesheet" media="print" />

The most important part is the media=print attribute. I forget which file you have to edit to make this work, but its the one where are the head tags of your files are determined...

[karma-lab]

you may have to edit the header file to add the following line of code:

<link rel="stylesheet" type="text/css" href="print_stylesheet" media="print" />

The most important part is the media=print attribute. I forget which file you have to edit to make this work, but its the one where are the head tags of your files are determined...

Thanks for the suggestion, but if I "view source" for any page of my site, I already see this at the top:

<link rel="stylesheet" type="text/css" href="includes/templates/theme033/css/style.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/theme033/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/theme033/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/theme033/css/print_stylesheet.css" />

[kobra]

Karma,

What are you trying to print??

If in a browser viewing your page and selecting file > print then the print css is not invoked

[karma-lab]

Yes, that's what I am doing.

I was trying to imagine the user printing the order confirmation page (which I have modified from the default to show an actual invoice similar to the order history page). So it still shows up in my "site theme and colors".

When is the print css invoked?

[DrByte]

As you've experienced, controlling background elements with print stylesheets is something that's evidently not well-supported across all platforms at the present time.

When is the print css invoked?

It is invoked when you choose the "Print" option from the browser.

I'm not sure what kobra is inferring in his statement to the contrary.

[kobra]

I should have said "universally"...

Difficult to explain - - bit Google for "printer friendly" and look for includable code & js to offer a printable pop-up

[karma-lab]

Yes, but not one single browser invoked it at all, apparently. None of the changes I edited into the print css was reflected in any browser. Either they showed the page the way it looks normally, or they showed the page in a white background version (but not the one that I specified, with a purple background for testing).

[rstevenson]

I believe there are strong overrides built into browsers, based on the idea of not wasting ink. So background colours (and therefore text colours) are likely going to be overridden. I expect a white background on a printout and therefore black text.

Having said that, I would expect things like borders to be shown, and rules causing elements to be hidden (or revealed) to be respected. On my own sites, for example, when I print the contact page, the left column and some other elements are hidden when printed. This is what I have in my stylesheet. It's not working right (some content slides up under my logo) and I have to fix it now (thanks for bringing this subject up to remind me ) but it is doing what I told it to do in the print_stylesheet.

Rob

[kobra]

Browsers are supposed to respect the print call of "media="print", but as stated this does not come across in all cases