Print Page Button

[Diarmuid_Sexton]

This is pretty a straightforward tip but might come in useful for someone.

If you want to add a “Print Page” button to your website:

1.Create a button or link as normal and set it’s id to “print”

2.Add this piece of script to the footer:

<script>
$("#print").click(function() { window.print(); });
</script>

3.Publish the site and that’s it!

PRINT-FRIENDLY PAGE
Finally, if you want to make your content print friendly, you can add custom css to the footer using:

@media print{
  .sidebar, .footer, .nav-bar { 
    display: none;
  }
}

In the above example, the classes specified will not be displayed.

Sin a bhfuil!

[kevin.fogarty]

Hello @Diarmuid_Sexton,

Thanks for the tip!

I was wondering if there was anyway to print specific sections of a page? This code prints everything like navbar and footer. I would like to print specific sections only.

Thanks
Kevin

[Diarmuid_Sexton]

Ya, you can set display: none; for the parts you don’t want to print and show the parts you do want to print.

[Diarmuid_Sexton]

I’ve also found this plugin which works quite well. Might not do exactly what you’re looking for but worth noting - even for this thread.

Print Friendly & PDF

[kevin.fogarty]

Thanks @Diarmuid_Sexton,

Had a look at the print friendly plugin, very easy to use, I like it!

[Diarmuid_Sexton]

Glad to hear that…

[Chrismitchell]

@Diarmuid_Sexton, I got the print button to work, but can’t seem to get the CSS to work. I added it to the custom code section on the page like so to hide the nav bar, but it’s not reading the code, and instead shows the raw code at the bottom of the page :

@media print{
.navigation-flex {
display: none;
}
}

Here is the page I am working on:
https://www.intelusagency.com/proposals/snowhite-hospitality-website-redesign

I also attached a screenshot of the code in my editor.

[Diarmuid_Sexton]

Hey,

You need to put this in style brackets - i.e.

<style> 
@media print{
     .navigation-flex {
     display: none;
     }
}
</style>

[StuM]

I missed this thread - great tip and instructions - thanks @Diarmuid_Sexton

[Chrismitchell]

Thanks @Diarmuid_Sexton. That worked perfectly!

[Steenager (Stina Jonsson)]

I got it working perfectly with a button. Thank you! I’ve hidden a few elements so it looks cleaner. Is there a way to ‘trigger it’ when the user tries to print using the normal print page method?

[Diarmuid_Sexton]

Sorry, never saw this - yes, it should trigger when the user prints as normal. the button just calls the regular print function of the browser.

[Polarismd (Chris Berry)]

Is there anyway to make this work with a

to print the content of a DIV?

[Diarmuid_Sexton]

Yes, set every other div on the page to display: none and set the div you want to print to display

[kgarlandvirtalis (Kane Garland)]

I managed to make a front cover for our documents. Hidden unless you click ‘print page’ also pulls through cms title etc

https://www.virtalis.com/chapter/virtalis-reach-automated-backup-system

[Dana_Severson]

@Diarmuid_Sexton I’m trying to do this for a link inside of a rich text block, but having trouble making it work because I can’t set the ID of the link inside of the rich text block. Any suggestions?

[QuentinZ (Quentin QZ Zakoian)]

Any idea why it doesn’t seem to be hiding more than the navbar in my case ?
Here is what I have :

And yet, the navbar is gone, but not the “besoins” section.

Any idea why ?

[webdev (Jeff Selser)]

@QuentinZ - Classes and ID’s are completely different things.

[Lais_Lara (Laís Lara)]

Hi, thanks for sharing this solution!

I added the script to the Before tag, and it worked perfectly in the Staging environment.

However, in the production environment, the printed pages are missing their colors. The first page appears correctly, but the rest of the text seems to be invisible. I only realized the text is there when I tried to copy the text.

Any ideas what could be causing this?

Here are some links:
https://arbitralis.webflow.io/regulamentos/portaria-no1-2024
https://www.arbitralis.com.br/regulamentos/portaria-no1-2024

PS: The print button is at the bottom of the page, called “Imprimir”.

And that’s how it is:

Thank you!