Print Friendly CSS Help

  • Resolved jrothra

    (@jrothra)


    10 years, 8 months ago

    I’m wanting to edit how the page/post prints. Right now, the following info is on the print page that I don’t want included:

    – Social link icons at top and bottom
    – Top banner ad (included via action hook)
    – Right sidebar (all content)
    – Jetpack’s Share This icons
    – Recommended stuff (via YARPP plugin)
    – Footer widget content

    cf. https://www.johnrothra.com/churchwide-evangelism-strategy-development/

    All the rest can stay and should be full page width. The stuff listed above are unnecessary ink hogs.

    Using the child theme, I’m not sure what to add into the CSS to eliminate all this. I know I can use Firebug to find certain things, but how do I exclude these via CSS?

Viewing 2 replies - 1 through 2 (of 2 total)

  • You can use @media print {} in conjunction with display: none to do this. In your child theme’s CSS, you’d use something like this:

    @media print {
    .social-block.span5 {
        display: none;
    }

    .tc-sidebar {
        display: none;
    }

    #content {
        width: 100%;
    }
}

    And so on and so forth.

    Thread Starter jrothra

    (@jrothra)

    I ended up using the following:

    @media print {
    .adsbygoogle {
      display: none;
    }
    .social-block.span5 {
      display: none;
    }
    .frm_forms {
      display: none;
    }
    .sharedaddy {
      display: none;
    }
    .footer-widgets {
      display: none;
    }
    .span4.social-block {
      display: none;
    }
    .span4.backtop {
      display: none;
    }
    .yarpp-related {
      display: none;
    }
    .tc-sidebar {
      display: none;
    }
    #content {
      width: 95%;
    }
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Print Friendly CSS Help’ is closed to new replies.