Streaming live at 10am (PST)

Print Page Button


#1

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!


#2

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


#3

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


#4

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


#5

Thanks @Diarmuid_Sexton,

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


#6

Glad to hear that…


#7

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


#8

Hey,

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

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

#9

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


#10

Thanks @Diarmuid_Sexton. That worked perfectly!