Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Print page button?


mathildeeeeee

Question

  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@tcp13 Thank you for this! It works great 🙂

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

@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 se

Posted Images

17 answers to this question

Recommended Posts

  • 1

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.

image.png.2cf4c61542fb4484f8bd52993cbc8b7a.png

 

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

Edited by tcp13

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

Sure! But remember that not everyone has a printer at home. If it is a website for usual customers, not for a commercial client, it would be better to add a link. I have recently bought my first home printer on mrdepot. So now I have an opportunity to print everything!

Link to post
  • 0

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

Link to post
  • 0

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:

image.thumb.png.3856f9fd65a4fb26bc37376f4edfe46e.png

Hope this helps!
-Tyler

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

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...

Link to post
  • 0
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?

Link to post
  • 0

@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!

Screen Shot 2021-01-12 at 8.08.22 PM.png

Link to post
  • 0
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)?

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0
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!

Link to post
  • 0

@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

Link to post
  • 0

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:

image.thumb.png.601a4b8074af49f0f2a6cafe93e707ae.png

Hope this helps!
-Tyler

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

@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;
}

 

Header Print Overlap.PNG

Header Print.PNG

Link to post
  • 0

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).

image.thumb.png.3df4e7675335b78e6c5f1d5490e5b11a.png

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:

image.thumb.png.437ae2ebc3ec2ef0c1a130e05576684e.png

Hope this helps!
-Tyler

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

@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:

1923057135_PrintFormattingScreenshot.thumb.PNG.2a949e7bf8d43e3beb4af5d3d0be9bfb.PNG

 

 

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?

Link to post
  • 0
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:

 image.png.3a69c7667a4dd4feb3d318e931256171.png         image.png.4dc39a8fec24e44a3326a2906c3720ef.png

 

Hope this helps,
-Tyler

Edited by tcp13

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...