Print button for HTML pages

Print button for HTML pages

by Leticia Dark-rose -
Number of replies: 2

Hi all,

Is there an easy way to print HTML pages in Moodle so they look similar to a .PDF? Currently when I go the print settings they take the navigation with them.

Thanks

Leticia

Average of ratings: -
In reply to Leticia Dark-rose

Re: Print button for HTML pages

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

You can add some CSS to your Moodle site to do this.  In your CSS you can do

@media print {

}

And any rules inside the block will be applied to the print view for a page.  You can use this to hide anything you don't want printed.

Average of ratings: Useful (3)
In reply to Leticia Dark-rose

Re: Print button for HTML pages

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers

You'll have to adjust this for your theme but for mine, I've added this to my site's additional HTML to have my Page modules print without any blocks or navigation. 

<style>

@media print {

/*allows Lessons to print without getting cut off*/

body {width: 1000px;}

/*remove breadcrumb from print out*/

.breadcrumb {display: none;}

/*remove administration block from side of print display*/

aside {display: none;}

/*remove nav bar from printout*/

.nav-tabs > li, .nav-pills > li {display: none;}

/*remove middle nav bar from printout*/

.nav-tabs, .nav-pills {display: none;}

/*removes side administration block from printout*/

.block {display: none;}

/*removes  nav bar from printout in multi-student printing*/

.navbar {display: none;}

/*removes  Moodle footer from print out*/

footer {display: none;}

/*removes minimized Blocks from print out*/

.block.hidden {display: none;}

}

</style>

Average of ratings: Useful (3)