Printer Friendly Page Using CSS

Hi. I'm new to this. I'm trying to make a site that kids could print coloring pages from. What should I put in the CSS to create a printer friendly page that focuses on the single image for that specific page? I will have one image (coloring page) per page, so I'm trying to hide the navigation, header, and footer while keeping the image centered on the page. I would like the image to be able to take up as much of the page as possible when it's printed. I don't have that much coding knowledge, so this has been a struggle. I appreciate any help.

Hi @shaunqb

Rather than trying to print a web page, would a .pdf of the colouring page work for your site?

6 hours ago, shaunqb said:

I'm trying to make a site that kids could print coloring pages from. What should I put in the CSS to create a printer friendly page that focuses on the single image for that specific page?

It's difficult to give specific advice without seeing the page on the actual site. It's a great idea to provide us with a working link to a site whenever you post a question.

However, you can style the page for printing by creating a "print style sheet". The good news is that a print style sheet is fairly easy to create if you know a little CSS. Start by going to Design > Custom CSS and add the following:

@media print {





}

Anything that you place within these curly braces will affect the way your printed pages look. For example, on many templates* you could hide the header and footer by adding this within the braces above:

header, footer { display: none; }

*Each Squarespace template is different and so this may require modification.

You can then add further CSS to resize your images or hide page backgrounds and so on.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

8 hours ago, meganheath said:

Hi @shaunqb

Rather than trying to print a web page, would a .pdf of the colouring page work for your site?

Would I be able to format a button to only print the coloring page that way? That would be ideal.

Hi @shaunqb

You can upload a .pdf file to a button block. Click the cog icon on the button editor and select file. This way when the user clicks the button the .pdf will open in a new tab and the user can print the pdf. 

Hope that helps.

This is an easy to use plug-in to print web pages: https://www.printfriendly.com/button

3 hours ago, meganheath said:

Hi @shaunqb

You can upload a .pdf file to a button block. Click the cog icon on the button editor and select file. This way when the user clicks the button the .pdf will open in a new tab and the user can print the pdf. 

Hope that helps.

 

Thanks! This solution worked best for my site.