Printing blog posts, so only main content div loads

#1

My client uses her blog for recipies and has asked me if its possible to make these printable. Now we could just make each recipe into a PDF and have a download at the bottom of each page but it would be neater if there could be a "print this page" button - which would load that article with a different stylesheet that just included the main content div - none of the side bar of header or anything else.
I cannot figure how to do that without using some clumsy javascript refresh code.
Any ideas? It would make a nice addition to the CMS features :slight_smile:

#2

You should be able to do this quite easily with a dedicated print stylesheet. Follow this guide and define the parts of the page you don't want to print (header, nav bar, footer, ads etc). You can then start to play with the design of the printed page by adjusting the font and image sizes as well as other elements to best fit your desired page size.

There are also default print CSS stylesheets that may help although I'd always recommend creating one from scratch if only so you understand how they work.

#3

Hi Tim, thanks. Both are useful resources. I understand how to make a stylesheet for a page that will print where it is static HTML but the issue I have with blog posts is how to apply that principle there. ie how to make the priint page link load just that post but with the right stylesheet.

#4

Unless I'm misunderstanding what you want to do you should be able to create your print stylesheet to essentially tell the browser what not to print (header, footer etc) and then add a button to call the window.print() function;
Quick example

#5

Thanks very much Tim. Yes thats pretty much what I put together in the end. I was overthinking it I think.

https://www.cakespirit.co.uk/recipes-20191121151131041-Ginger-Cake

I am very glad you are still around here, the forum is a better place because of it. Cheers.