Has anyone here successfully tweaked their site so the browser will print the header image?
Thanks
Has anyone here successfully tweaked their site so the browser will print the header image?
Thanks
edit the print_stylesheet.css
just take the #navMainWrapper out of the line that says {display_none}
Zen cart PCI compliant Hosting
I deleted the whole print_stylesheet.css as noted in another thread. I get the header box but not the header_bg.jpg image. I realize the image is used as a background but can it be forced to print?
It's more a browser issue then a zen-cart issue.
In firefox hit File > Page Setup and there is an option there to print background.
For IE see http://www.microsoft.com/enable/trai...ackground.aspx
Thank you. I thought that was it.
Can it be forced? and how would that be done?
I've been dealing with this same issue for the past three hours, and here's the workaround I came up with that worked for me. There may be a better way to do this, but this is the best I could come up with.
Please forgive me if this explanation is a little rough; I'm not an expert with css and don't exactly know the proper terms for things. I'll do the best I can.
(1) My ultimate problems was that the designated bkg image, which was my entire header, that was defined in "stylesheet.css" was not printing. Here's what that looked like in "stylesheet.css":
#logoWrapper {
margin: 0em;
padding: 0em;
background-image: url("http://www.mysite.com/zencart/includes/templates/template_alpha/images/imgmain.jpg");
height: 265px;
width: 750px;
}
(2) I modified my template's "stylesheet.css" file, adding an entirely new definition as follows:
#logoWrapperPrint {
display: none;
}
(3) Next, I modified my template's "tpl_header.php" file, adding the following line. I put this line directly before the "<div id="logoWrapper">" line. The idea here was that the page would load my header .jpg image, but because I defined it as "display:none" in the css file, it would not appear on the web page. No big deal, because it appears already when it's the background image.
<div id="logoWrapperPrint"><img src="http://www.mysite.com/zencart/includes/templates/template_alpha/images/imgmain.jpg"></div>
(4) Next, I modified my template's "print_stylesheet.css" file, adding the following definition:
#logoWrapperPrint {
display: block;
}
Essentially, the original background image that wouldn't print before was now printing because the image was actually in the webpage, but was hidden when viewed in the browser. My print stylesheet called for it to appear on the printed page, though, so that sort of takes the place of the background image that doesn't print.
(5) When I got this to work, I had to make a correction in my "print_stylesheet.css" file, because you'll notice I had the header background image set to have a height of 265px. This was causing a 265px gap between my header image that was printing and the page's main content. So I added "#logoWrapper" to the list of definitions that were set to "display:none" in the "print_stylesheet.css" file. It no longer printed, which was fine - it was printing blank anyway. Problem fixed.
------
I hope this explanation makes sense. It worked for me, so you might give it a try. I even went a step further and created a whole new header image for my printouts, modifying the image slightly to appear better for the printed page versus the screen. (and gave it a different name, which I plugged in to the appropriate spots, of course.)
Hope this helps. I'm no expert, so take this for what it's worth. If you have further questions, maybe I can explain something or try to troubleshoot the method above.
Thank you for your post. I will give this a try as soon as I get a chance and I will report back the result. I'm no expert either but it looks like you may have logically figured this out....I will let you know....
Studeo
Thank you again for your fix. Whether its professionally clean or not it doesn't matter to me BECAUSE IT WORKS!!!!
I had eliminated my print_stylesheet at some point so I had to tweak a new one but your instructions did the job.
THANK YOU!