Support » Themes and Templates » Print Preview is ugly

  • 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:

    @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; }
Viewing 2 replies - 1 through 2 (of 2 total)
  • 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 ( 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.

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

    Thanks again for taking the time to help others.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Print Preview is ugly’ is closed to new replies.