Streaming live at 10am (PST)

Print Page Button

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”

image

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!

7 Likes

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

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

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.

www.printfriendly.com

1 Like

Thanks @Diarmuid_Sexton,

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

Glad to hear that…

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

Hey,

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

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

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

Thanks @Diarmuid_Sexton. That worked perfectly!

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?