Printing entire page including sidebars, header, etc.
 

I see some guidance for printing just a post or for using wp-print to do that, but is it possible to print the entire web page as it appears with both sidebars and header? Using "print" from the browser just stuffs the center column into a narrow left justified column. The site I'm using relies heavily on pages; so I would want "pages" web pages to print in addition to posts.

The "stuffing into narrow column" issue was fixed in 3.3.2

In 3.3.2 the print section in style.css looks like this:
To print the page as is try this print CSS instead of the one above:

Thank you. I updated to 3.3.2 and tried your suggested "as is" code in the css inserts box, but still got only the center column (although it is now nice and wide). Let me know if you can think of any other way to print a wysiwyg version of the site pages.

Replace the existing Print Style section in style.css with this new Print Style section posted above, by actually editing style.css in this case. Do not put it into CSS Inserts.

I am adding this to the Todo list, an option to print the whole page. Won't be included in 3.3.3 though

I've made the changes to the Print Style section in the css.php file and it seems to work fine, except that the logo image does not print on the page. Is there any way to address this? (I am suppressing displaying the header text, and am instead displaying a large logo image in its place.) Thanks!

Hi,

I've been reading this set of threads trying to solve my problem. I have Atahualpa 3.5.3 and can't get the entire page to print...even after putting the second set of code in the style css file in the atahualpa/styles folder location. what am I doing wrong.

Site is http://new.directchassis.com but I have others that may have this problem.
Thanks,
John

In Atahualpa 3.5.3 I just added to all the sidebars in the PRINT STYLE area in the css.php like this:

And also to clean it up a little bit
This worked to me!
Greets, Tomas

Thanks for this solution. I spent hours trying to find a solution by searching "How do I print the sidebars and how do I print a full page". I couldn't find what I needed. I finally rewrote the print.css using instructions on wordpress.org to print just the sidebars but it presented a problem when returning to the URL. It scrambled the page layout and didn't work if you tried to change the print %.

So thanks again for this solution... it worked perfectly.

My question is why does it work? Since all my searches turned up instructions to rewrite the css print file using display:block on everything you wanted to print, why does excluding any mention of it work? Is there a default that assumes display:block on everything if nothing exists?

Just curious...I'd like to think I can start from a logical place if this happens again under different circumstances.

Is there any code for printing just the sidebars that doesn't create more problems? This is the code I wrote. I'm sure there is a lot in it that isn't needed as I was doing a lot of guessing trying to hit the correct markers! (Try not to laugh or groan too much...)
@charset "UTF-8";
/* CSS Document */

/* Print Style Sheet */
@media print {

body {
background:white;
color:black;
margin:0;
font-size:12pt;
line-height:1.4;
font-family: arial, sans-serif;
}
h2 {
color: black;
font-size: 14pt !important;
font-weight: bold !important;
display:block;
}

h3 {
color: black;
font-size: 12pt !important;
font-weight: bold;
}

hr {display:block;
color:black;
}

.pagebreak { line-height:2pt;
page-break-after:always;
}


p {
color: black;
font-size: 12pt !important;
font-weight: normal;
}

a:link,
a:visited,
a:active,
a:hover {
text-decoration: underline !important;
color: black;
font-size:12pt;
}

#wrapper {display:block; width: 540pt;}
#header { display:none; }

#content {
display:none;
}

#comments {
display:none;
}

#black-studio-tinymce-10 {display:none;}
#black-studio-tinymce-11 {display:none;}


#sidebar {
background:white;
color:black;
font-size:12pt;
margin-left: 0;
float:none;
width:270pt;
display:block;
}

#rightSidebar{
background:white;
color:black;
font-size:12pt;
margin-left: 0;
float:right;
width:270pt;
display:block;
}
#leftSidebar {
background:white;
color:black;
font-size:12pt;
margin-left: 0;
float:left;
width:270pt;
display:block;
}

#footer { display:none; }

#menu { display:none; }

.colone {
color:black;
font-size:12pt;
display:block;
}

.coltwo {
color:black;
font-size:12pt;
display:block;
}

.colthree {
color:black;
font-size:12pt;
display:block;
}

.navigation,
.navigation-top,
.navigation-middle,
.navigation-bottom,
.wp-pagenavi-navigation,
.wp-pagenavi a:link,
.wp-pagenavi a:active,
.wp-pagenavi a:visited,
.wp-pagenavi a:hover,
#comment,
#respond,
.remove-for-print {
display: none;
}

div.widget_nav_menu ul li a:link,
div.widget_nav_menu ul li a:active,
div.widget_nav_menu ul li a:visited,
div.widget_nav_menu ul li a:hover,
div.widget_pages ul li a:link,
div.widget_pages ul li a:active,
div.widget_pages ul li a:visited,
div.widget_pages ul li a:hover {
display: none !important;
}


td#left, td#right {
margin-left: 0;
float:none;
width:270pt;
color:black;
background:white;
font-size:12pt;
display:block;
}



td#middle {
margin-left:0;
float:none;
width:60%;
color:black;
font-size:12pt;
display:none;
}



/* 4 hacks for display:none for td#left and td#right for all all browsers except IE. */

*:lang(en) td#left{
display:block;
}

*:lang(en) td#right{
display: block;
}

td#left:empty {
display: none;
}

td#right:empty {
display: none;
}



}