Chrome print preview changes styling of web page

Question

Short Version:

I am using Chrome 27.0.1453.94 on Windows 7 Pro

I go to http://www.try-phpbb.com/30x/ using Chrome

I select Print... | Save as PDF

The print preview looks nothing like the web page - layout, links, fonts all wrong.

Why?

How can I fix this to make the PDF styled the same way as the web site?

Long Version:

I am a member of a secure forum (ie have to log in for access), which is base on the phpBB forum template (https://www.phpbb.com/). Our forum will be cleared of all threads and posts soon to make room for the next round of subscribers.

We have been given permission (even encouraged) by the moderators to download the contents of each topic/thread/post and write them into PDF files so we can keep referencing them in the future. We have to do this ourselves, and I volunteered to do the work as I have an IT background. But its proving harder than I thought.

I was hoping to do the following this process...

1. Download and add "Stylish" Chrome Extension (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe)
2. Add CSS code to Stylish to modify the appearance of the forum pages ready for PDF migration
3. In Chrome use Print | Save as PDF option to save styled page as a PDF doc
4. For multi-page forums, repeat this process for each page and then use PDFMate (or similar) to concatenate the PDF docs together into a single long PDF.

Steps 1, 2 and 4 are working perfectly, but step 3 is not.

The print preview in Chrome screws up the appearance of the forum pages. Layout styling is lost, fonts are completely different, links are missing or look terrible. For example, try printing this page (http://www.try-phpbb.com/30x/) - it looks completely different in print preview to how it looks in the browser.

Is there something I can do to fix this? Can I somehow give the print preview version some CSS code to restyle it? Anyone know why this would be happening?

Or alternatively, can you suggest another solution to convert HTML to PDF? I have tried Chrome extensions "iWeb2x" and "Send to Google Drive", but with no success - because the forum is secured, the PDF file they create is the forum's Login page, not the forum thread page I'm currently looking at.

Any help greatly appreciated - thanks.

Answer 1

Have a look here, maybe it's helpful

http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

You can set your own css style for the printed page.

Hope it helps, regards