Print Version CSS Help: Header, Can't Remove Stuff at Bottom

jrothra
(@jrothra)

8 years, 9 months ago

I’m using the latest of Customizr (incl. child theme) and WP.

URL used to test: http://www.johnrothra.com/evangelism/review-seven-common-evangelism-methods/

Child Theme CSS: http://pastebin.com/8DWubFeT

I’m having trouble getting the CSS to display the print version properly (tested in Chrome using print preview). I’ll describe the issues below.

Issue 1: Header Displays on top of Article Title

This only appears when you are scrolled to the top of the page (not displaying the mini-header that floats as you scroll down). When I look at the print preview (and when I’ve tried physically printing it), the header is giant and bleeds over the article title.

What I’d Prefer: I’d rather the logo icon display at the top (left or center is fine), with the body content below it.

Issue 2: Header Inserts Self into Article When Scrolled Down Some

If you try to print the article while part of the way down, or at the bottom, then the floating header inserts itself.

What I’d Prefer: Is there a way to maintain it is at the top of the printed version, even though it’s sticky (floating) on the website?

Issue 3: Can’t Remove Some Items from Bottom

Although these are from plugins, this is part of my print-version help thread and a matter of CSS.

I’ve tried every variation I can think of to get the “X Stay Up To Date” section (the sign up box) and the “Related Articles” to not display. Anyone have any ideas what CSS to use?

What I’d Prefer: Those (and that extra white space) to not be there.

Viewing 1 replies (of 1 total)

(@d4z_c0nf)

Mmm
probably you can solve both issues 1 and 2 with:

@media print {
    .sticky-enabled .tc-header { position: relative;}
    .sticky-enabled #tc-reset-margin-top { display: none;}
}

For the point 3 you can try something like:

@media print{
  .sharedaddy.sd-sharing-enabled, div.mailmunch-forms-after-post, #jp-relatedposts, .tc-btt-wrapper {
    display: none !important;
    height: 0 !important;
    visibility: hidden;
  }
}

Hope this helps.

Viewing 1 replies (of 1 total)

The topic ‘Print Version CSS Help: Header, Can't Remove Stuff at Bottom’ is closed to new replies.

Tags