mathildeeeeee Posted October 22, 2020 Posted October 22, 2020 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!
tcp13 Posted October 23, 2020 Posted October 23, 2020 (edited) 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 Edited October 23, 2020 by tcp13 Ziggy 1 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
mathildeeeeee Posted October 24, 2020 Author Posted October 24, 2020 @tcp13 Thank you for this! It works great 🙂 tcp13 1
jq_ Posted November 19, 2020 Posted November 19, 2020 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
tcp13 Posted November 19, 2020 Posted November 19, 2020 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 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
MikeGSolutions Posted December 16, 2020 Posted December 16, 2020 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...
tuanphan Posted December 21, 2020 Posted December 21, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
JSM Posted January 12, 2021 Posted January 12, 2021 @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!
tcp13 Posted January 12, 2021 Posted January 12, 2021 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)? JSM 1 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
JSM Posted January 15, 2021 Posted January 15, 2021 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!
ConradH Posted January 20, 2021 Posted January 20, 2021 @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
tcp13 Posted January 20, 2021 Posted January 20, 2021 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 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
ConradH Posted January 21, 2021 Posted January 21, 2021 @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; }
tcp13 Posted January 21, 2021 Posted January 21, 2021 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 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
ConradH Posted February 11, 2021 Posted February 11, 2021 @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? tcp13 1
tcp13 Posted February 11, 2021 Posted February 11, 2021 (edited) 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 Edited February 11, 2021 by tcp13 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
simon.stjohn Posted March 1, 2023 Posted March 1, 2023 @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
tcp13 Posted March 2, 2023 Posted March 2, 2023 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 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.
simon.stjohn Posted March 5, 2023 Posted March 5, 2023 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!
thedowntowncreative Posted April 26, 2023 Posted April 26, 2023 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!
thedowntowncreative Posted May 1, 2023 Posted May 1, 2023 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!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment