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
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
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!
Thanks!
ASKER
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
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
ASKER
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!
ASKER
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?
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?
ASKER
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.
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.
ASKER
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.
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?
ASKER
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.
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
I also recommend hiding the main navigation, footer navigation, and the search form.