WordPress.org

1. nightscrabbler
   Member
   Posted 1 year ago #

   Hi all

   New here. I have a problem with my Print Preview. It creates a lot of extra white space for unknown reasons, it cuts off the post suddenly and the word Cancel appears at the bottom even though I can't find that word anywhere in my code. I am using the Clear template (having stripped it down to be almost blank) and had created a print method for my stylesheet to eliminate the header/footer/sidebar from printing. Unfortunately, it just looks ugly. I've tried editing the css in a few different ways, read the WordPress Print Stylesheet tips, and have tried to find some answers online to no avail. All I want is a nice and clean print stylesheet that prints the whole page! Take a look at this page in Print Preview and see for yourself: http://www.mississaugascrabble.com/category/stats/

   @media print {
   /* If printing the page, get rid of the sidebar and comments */
   body { background:white; color:black; margin:0 }
   #wrapper { height: 0; width: 0%; }
   #header { height: 0; margin: 0; padding: 0; }
   #footer { height: 0; margin: 0; padding: 0;}
   #footer-sidebar { height: 0; }
   #sidebar { display:none }
   #sidebar1 { display:none }
   #sidebar2 { display:none }
   #content { margin-top:0; margin-left:0; float:left; width:auto }
    .title { display: none; }
    .meta { display: none }
   #main { margin-top:0; margin-left:0; float:none; width:auto; }
   .comments { display: none; }
   #logo { margin: 0; padding: 0; display:none !important; }
   #menu { margin: 0; padding: 0; display:none !important; }
   .navigation { display: none; }
   #blog-title { display: none; }
   .comments { display: none; }
   }

2. nancyeb01
   Member
   Posted 1 year ago #

   Hi, I am struggling with the same thing! I was told to add a link to a print.css stylesheet as I do with my regular website. I tried that but it is still not great.

   I did notice that your content is cut off in the print preview. That may be because the container has a tag: overflow:hidden?

   Anyway, here is how to link to a print.css based on what my theme company (iThemes.com) suggested. Find the functions.php file in your theme folder. Make a copy of it so you have it to go back to. then add (before the ending tag '?>':

   add_action('wp_print_styles', 'add_print_css');

   function add_print_css() {
   wp_enqueue_style('print', get_bloginfo('stylesheet_directory') .'/print.css', '', '', 'print');
   }

   Create a stylesheet called 'print.css' and put that in the same folder. I take a copy of my main stylesheet and rename it print.css and then start modifying it.

   Do a little research on print stylesheets. I usually use the css selector 'display:none;' for sidebars and navigation.

   I'm not an expert but I hope this helps someone.

3. DK-222
   Member
   Posted 1 year ago #

   Thanks nancyeb01! Your post helped me out of a problem I had.

   Thanks again for taking the time to help others.

Topic Closed

This topic has been closed to new replies.