Jump to content

Printer Friendly Page Using CSS

Recommended Posts

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.

Link to comment
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.