Print page button?

Site URL: https://www.inspirewellnessandnutrition.com/blog/banana-bread-cookies

Hey guys!

Quick question: is it possible to add a Print button/link on blog posts?

(This is a Business plan website)

Thanks in advance!

Hi @mathildeeeeee,

You may be able to add print functionality with a standard Squarespace button by setting the clickthrough URL to javascript:window.print(); - this just uses JS to open the browser's print dialog. Ensure it's not set to open in a new window.

You can also use @media print in CSS to create a printer-friendly format that works better with the built-in print dialog (Ctrl+P). Here's what worked well on my template (Tudor 7.0) - just add it within Design > Advanced > Custom CSS and tweak as needed:

@media print {

  /*resize the content*/
  .blog-item-content-wrapper {
    width:100% !important;
    margin:0px !important;
    padding:0px !important;
    color: #000;
    background-color: #fff;
  }

  /*hide a bunch of extra stuff*/
  #blogItemSidebarContent, .blog-item-actions, #header, #footer, #comments .header-controls, #comments .new-comment-area, .sqs-announcement-bar-dropzone, .sqs-frontend-overlay-editor-widget {
    display:none !important;
  }

  /*format the author profile*/
  .blog-item-author-profile--sidebar {
    margin-top:500px !important;
    display:block !important;
  }

  /*remove weird link formatting*/
  a::after {
    content: "" !important;
  }
  
  /*reduce page spacing*/
  #page {
    margin:0px !important;
  }
}

Hope this helps!
-Tyler

@tcp13 Thank you for this! It works great 🙂

Hey! Having some real trouble with the "@media print" custom CSS. I'm on a business plan, using a Brine family template and inserting code into Design > Custom CSS. I can get "@media screen" to work just fine, but the template seems to ignore the "@media print" CSS. 

The goal is to hide the site title when a user goes to print the page using the system print dialog. When I use the code:

@media screen {
  #collection-5fb5c69340966814ba9b1bda {
    .Header-inner {
      display: none !important;
    }
  }
}

 It hides the site title on the screen, that's fine and works, but when I change it to read:

@media print {
  #collection-5fb5c69340966814ba9b1bda {
    .Header-inner {
      display: none !important;
    }
  }
}

The site title is still visible when the print dialog opens 😞.  It's like "@media print" is ignored! Any suggestions?

The specific page is myleisure.io/print-help

Hey @jq_,

That appears to be the mobile header that's showing, since the print preview is below your template's mobile breakpoint. Try adding the .Mobile-bar selector into your CSS like so:

@media print {
  .Header-inner, .Mobile-bar {
    display:none!important;
  }
}

With this expected result:

Hope this helps!
-Tyler

Thanks for the information in this string, it's been a huge help. I'm working to customize the print layout and your code has helped. 

I have 2 additional items I'm struggling with, hopefully you can help.

1 - What is the code to add an image to the print layout? The goal is to add a header image to the page.

2 - I'm using this for a blog post and the main image is split between page 1 and 2. What code can I use to reduce the image size to fit onto the first page?

Here is the site I'm working on. www.hayis4horses.com/recipes

Thanks so much...

On 12/17/2020 at 1:33 AM, MikeGSolutions said:

Thanks for the information in this string, it's been a huge help. I'm working to customize the print layout and your code has helped. 

I have 2 additional items I'm struggling with, hopefully you can help.

1 - What is the code to add an image to the print layout? The goal is to add a header image to the page.

2 - I'm using this for a blog post and the main image is split between page 1 and 2. What code can I use to reduce the image size to fit onto the first page?

Here is the site I'm working on. www.hayis4horses.com/recipes

Thanks so much...

Have you found the solution yet?

No not yet... do you have any thoughts?

@tcp13 thank you for that code snippet - it really helped me get a lot farther in my quest to transform the squarespace blog into printer-friendly recipes! 

I was also looking to hide my global nav buttons, but not the logo at the top of the page (in printed form it doesn't make much sense to have those listed). So far I've only been able to keep the whoel global nav, or make the whole global nav, logo included, not display in the printed version. Any chance you can help me there? I've attached a screenshot of what appears now that I'd like to hide in case it helps!

4 hours ago, JSM said:

@tcp13 thank you for that code snippet - it really helped me get a lot farther in my quest to transform the squarespace blog into printer-friendly recipes! 

I was also looking to hide my global nav buttons, but not the logo at the top of the page (in printed form it doesn't make much sense to have those listed). So far I've only been able to keep the whoel global nav, or make the whole global nav, logo included, not display in the printed version. Any chance you can help me there? I've attached a screenshot of what appears now that I'd like to hide in case it helps!

Sure thing @JSM - can you post a link to your site (and a page password if it's private)?

On 1/13/2021 at 12:34 AM, tcp13 said:

Sure thing @JSM - can you post a link to your site (and a page password if it's private)?

Thank you - PM'ing you now with the info!

@tcp13 I'm also looking to do something similar, keep my logo but get rid of the menu navigation. I'd also like to reduce the size of the page title section. Any help would be appreciated! Here's a sample page:

https://lovecolumbiamo.org/income-based-housing

Hi @ConradH,

I can't seem to find a way to reduce the page title sizing, but replacing your existing CSS with the following should keep the logo visible:

/*PRINT FORMATTING*/
@media print {
  /*hide excess stuff*/
  #footer, .sqs-block-button-container--left, #footer-sections {
    display: none !important;
  }

  /*hide nav bar*/
  .header-nav, .header-actions {
    display: none !important;
  }

  /*add background color to logo since transparent on white is no bueno*/
  #header, .header-inner{
    background-color:#a6bdba!important;
    -webkit-print-color-adjust: exact !important;
  }

  /*hide link urls*/
  a::after {
    content: "" !important;
  }

  /*ensure no page margin*/
  #page {
    margin: 0px !important;
  }
}

With this expected result:

Hope this helps!
-Tyler

@tcp13 thanks for the help! It looks like the page title section is unique to each section block. I was able to set a minimum custom height of 10 to reduce it considerably. I'll have to do it on each page, but it's looking really good now!

The header bar/logo appears on each page, not just the first page, and it overlaps the text on the second page. Is there any way to disable the header on subsequent pages? If not, can I change out the logo so that I don't need a background?  I tried this, but it didn't work:

.header-title-logo a {
content: url('https://images.squarespace-cdn.com/content/v1/5fa318d8aa276a66ec5322fb/1609611984060-SAYWOSH6ATQYL3QJ5SU7/ke17ZwdGBToddI8pDm48kLkAmGt-nEc-KDyOz6MyEdx7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0slJ0ZK8bhnMvwBc9-o9uiV5bJKIkPq_14eERHvCXjNC_RY8ahIp3NZpEzceY_TM9w/Logo+Grey+V+Transparent.png') !important;
}

You're close, @ConradH! Try targeting the img itself instead of its parent anchor element:

/*change logo img src*/
.header-title-logo img {
	content: url('https://images.squarespace-cdn.com/content/v1/5fa318d8aa276a66ec5322fb/1609611984060-SAYWOSH6ATQYL3QJ5SU7/ke17ZwdGBToddI8pDm48kLkAmGt-nEc-KDyOz6MyEdx7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0slJ0ZK8bhnMvwBc9-o9uiV5bJKIkPq_14eERHvCXjNC_RY8ahIp3NZpEzceY_TM9w/Logo+Grey+V+Transparent.png') !important;
}

If we then remove the teal background, you're left with the new grey logo (which still appears at the top of each page).

To make it appear on only the first page, add this line of CSS:

/*logo on only first page*/
#header,.header-inner {
  position:absolute !important;
}

With this expected result:

Hope this helps!
-Tyler

@tcp13  It's been a little bit since I could get back to this project, but wanted to share some progress in case it helps anyone else. I was able to figure out a way to change the size of the title section:

/*header section height*/
section.page-section.section-height--small:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
	min-height: unset !important;
	height: 15vh !important;
  padding-top: 10vh !important;
  padding-bottom: 1vh !important;
}

I also needed to keep my blog excerpts from breaking onto the next page, and this did the trick:

/*prevent page breaks */
  .summary-item {page-break-inside: avoid!important;}

Here's the end result:

Do you know if there's a way to hide the Print button on mobile screens for multiple pages without targeting the block code for every individual button?

9 minutes ago, ConradH said:

Do you know if there's a way to hide the Print button on mobile screens for multiple pages without targeting the block code for every individual button?

@ConradH Try adding this in Design > Custom CSS:

@media only screen and (max-width: 768px) {
  a.sqs-block-button-element[href="javascript:window.print();"]{display:none!important;}
}

With this expected result:

Hope this helps,
-Tyler

@tcp13 Hey Tyler, Thanks for this css! I was just wondering if it is possible to target just one page, rather than affect the whole site?

I would like users to generate a printer-friendly version of https://www.blog.baligram.me/bali-packing-list to remove header and footer and adjust the font size just to reduce the number of pages it takes to print the list but I don't really need to affect any other pages on the site.

Thanks so much if you have a moment or anyone else can help?

Cheers Simon

Hey @simon.stjohn,

Instead of pasting your code into the Custom CSS area (which applies it sitewide to every page), open up the page settings (cogwheel icon). Under "Advanced", you can paste the code into the Page Header Code Injection which only applies to that page.

This injection expects HTML, so if you're pasting in CSS, you'll need to wrap it in <style> tags like so:

<style>
  /* PASTE YOUR CSS CODE HERE */
</style>

Hope this helps!
-Tyler

Hi @tcp13 That is the bit of info I was missing....that page level was expecting html and thus style tags! Another great lesson learned. 🙂

Tyler, thanks so much for taking the time to reply and help me....really appreciated!

Hi, thank you so much, But I'm curious to learn about the print styling options won't apply to my website? I'm trying to exclude in print the examples you mentioned above like header navigation, #footer etc. to no avail. I'm also trying to include all accordion content (as if they were ALL expanded)

https://fplegal.squarespace.com/practice-areas

Same goes for showing ALL tabbed content for print on a page like https://fplegal.squarespace.com/professionals/marc-a-peritz

Thanks for any tidbit of time spent on this. I sincerely appreciate it!

On 3/2/2023 at 12:05 PM, tcp13 said:

Hey @simon.stjohn,

Instead of pasting your code into the Custom CSS area (which applies it sitewide to every page), open up the page settings (cogwheel icon). Under "Advanced", you can paste the code into the Page Header Code Injection which only applies to that page.

This injection expects HTML, so if you're pasting in CSS, you'll need to wrap it in <style> tags like so:

<style>
  /* PASTE YOUR CSS CODE HERE */
</style>

Hope this helps!
-Tyler

@tcp13

Hi, thank you so much, But I'm curious to learn about the print styling options won't apply to my website? I'm trying to exclude in print the examples you mentioned above like header navigation, #footer etc. to no avail. I'm also trying to include all accordion content (as if they were ALL expanded)

https://fplegal.squarespace.com/practice-areas

Same goes for showing ALL tabbed content for print on a page like https://fplegal.squarespace.com/professionals/marc-a-peritz

Thanks for any tidbit of time spent on this. I sincerely appreciate it!