Link to home
Create AccountLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

Using @media print

Hi, Please go here: http://dev2.magickitchen.com/menu/main_courses.html  User name: pepe, pw: BobTheBuilder45!! and look at print preview, or print, depending on your browser.

I am getting close. The owner wants it to look exactly like the page when printed, see attached screenshot. I've also attached my print css, maybe that will help.

Thanks in advance, this is a hard one for me.
wysiwg2.jpg
bootstrap-print.css
Avatar of David S.
David S.
Flag of United States of America image

You need to tell your client that doing so is not user friendly. Web browsers disable the printing of backgrounds by default to save ink.

I also recommend hiding the main navigation, footer navigation, and the search form.
Avatar of Melody Scott

ASKER

Hi, I do have this: http://www.magickitchen.com/menu/side_dishes.html  Which I see isn't as good as it was a week ago, I need to look into the css again.... anyway, the client is not the type of person who backs down, so I need to know how to do this.

Thanks!
If you look here: http://test.magickitchen.com/menu/side_dishes.html, same user name and password, it is the old site. That was tables, and printed the way he wanted it to.
Hi,

I agree with Kravimir about not printing navigation links.

Also remove keywords, comments, cgi code from printing, you should keep only important information.
For quick way to do it on blocks without touching the css, is to use the Bootstrap print class
http://getbootstrap.com/css/#responsive-utilities-print

Your page is not loading, i cannot check it ...
http://dev2.magickitchen.com/menu/main_courses.html
Hi, the page is loading for me. I agree with you as well, but we need to listen to the client in this case. He will not, I repeat, will not agree with us. He wants, as he put it, wysiwyg printing. I'll try that print classs, thanks!
Did you use the user name/password for that page? Thanks.
Now it is ok.

You won't be able to print exactly the same way it is appearing on the webs page.

There are printing limitation browser, users settings, printer settings you have no control on this.
You should just say that to the client, and you should ask him what are the important information
that need to be print.
What you should try to explain to him is The most important is that the informations are print, not necessarily the way it is print.
This will be close to the website look and feel but not the exact copy.

Which part do you want to fix exactly?
I understand that, and so does he. He has his set to print background colors. If he can print it the way he wants, that will be good enough.

I'm sorry to seem stubborn, but this person wants what he wants. I have to be stubborn on his behalf. :)  

I almost had it on http://dev2.magickitchen.com/menu/main_courses.html, but now I see we overwrote my print.css.

I have reinstated my print css, can you please have a look at it now? Sorry about that, we're replacing the <head> information with an external file, and that was missed.
Let me put it this way... experts on here said, "tell the client you can't do a site with two side navigations and a header, it's just not done".

I persevered, and now we have what he asked for. So he is not going to believe we can't do this. He doesn't want to know the proper way, he wants to know that we can do it his way. And he is the client, after all. :)  

I hope you can help.
Let me put it this way... experts on here said, "tell the client you can't do a site with two side navigations and a header, it's just not done".
Firstly, there is a difference between can and should. If I read between the lines the recommendation you refer to was about what should be done - whereas what is being discussed here is what can be done.

To best answer this you need to establish what is the main objective you would like to fulfill for a print out - is it to get an exact copy of the page or to provide the user with a list of the items on that page.

If an exact copy of the page then the question is - what purpose does printing out the navigation have?.

If you really want a WYSIWYG experience then I would look at printing to PDF and providing a PDF download button - that way you can have complete control over the page layout and still make it dynamic. As this is not likely going to be a popular option given the effort involved - the next step is to hide the navigation sidebars and focus only on the main content.

Before taking this further - is the above suggestion an option or not?
Hi- I asked the same question of the owner. He says that the experience he sees the customer having is this- a son or daughter of a senior tells them about our service. But the parent doesn't have a computer, so they print out the page for them. Seeing the navigation shows them there are extra options for meals. So, they print out the main courses page, but can see that there are options for diabetic meals and dialysis meals as well.

I did think of a pdf button, and I think it would end up being easier, but that was vetoed, because to him, the customer just wants to hit the print button on the toolbar, or hit CTRL P.

That's the reason behind it.   I do feel that I'm very close here: http://dev2.magickitchen.com/menu/main_courses.html  user name: pepe and pw: BobTheBuilder45!!

I hope I can talk him into only the left navigation, since the right doesn't add any value according to his explanation above.  Thanks.
Hi,

With the result you have, I would try to add some padding under each product div and add page break  after each product div , or prevent page break in a product div.

Another solution will be to create a PHP page for the printing only, you may have more control using this option.

Print css are difficult to debug because we cannot inspect the code so it's need a lot of test and preview, till you have the result you want and when you will get it, chance are that you will not have the same result on each browser and OS.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Thank you. I was wondering this weekend if I could do something like this. I appreciate the information, I'll work with it and then ask more specific questions if I run into trouble.
You are welcome.