Printing Issues with Theme

Ouch, yes! Major bug on printing Nikeo.

• All menu items, links, and the logo area print as text followed by the hyperlink
• Active social links print as icons followed by their hyperlink
• Breadcrumbs print as text followed by their hyperlink (except for current page title)
• All images print as image followed by link

Very messy. Is there a simple fix?

More testing:

• The tag line splits in Safari (for Mac), but not in Firefox (for Mac).
• All the text on the page is black, not grey (personally, I don’t mind this, but some might, especially if they need to provide sample layout prints to a client).
• The slider text prints in black, not white, so it’s impossible to read—and there is no opaque box to make it legible even if it were white.
• Buttons show print as a hyperlink, no button.
• Text overflows and overwrites the (default) footer on the page on Firefox for Mac (but not Safari for Mac).
• The featured image circles print in square #fafafa boxes, with a bit of a (weird?) multicoloured border around the square.
• The featured image circles print with their bottoms cut off in Firefox, as if they are being shifted up somehow. They are no longer centred in the circles on the printed page as they are on the web page.
• Good news: Safari acts in a responsive manner, printing the menu (badly; with hyperlinks; see above) when the browser window is wide and tries to print a menu button when it’s not wide. Bad news: Only the shadows of the little three-line menu button are showing up on the print, not the button itself.
• Firefox is not responsive and always prints as if it were from a small browser window—trying to print just the menu button, not the menu. However, again, the menu button doesn’t show; only the shadows of it show.
• Comments on posts come out almost black, so you cannot see the number
• Post formats that on the webpage have a coloured box with a darker coloured box to the left print only the coloured bar to the left. This is probably a good thing, in my opinion, but just checking ??

On an iPad, most of the above, plus:

• (Weird, this one) The right text widget in the footer is showing %20s in it instead of spaces on the mobile printout/PDF save. I thought this might be the app I was using, so tried another, but they both do it.

I’m hoping this is just one line of code you have to tweak, which will magically fix everything ??

I finally got frustrated enough to look into this.

As default, the theme (orange.css, blue.css etc.) ships with:

a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }

in the @media print section. This is what is inserting all those messy hyperlinks everywhere on the printed page. Changing the content to nothing fixes it.

The @media print section also includes a page margin of .5cm, which is not enough (the page overflows onto the default headers and footers in the browser). Changing to 1cm fixes it.

The circles for the featured images / the images print OK-ish on Safari, but there’s an irritating border I can’t get rid of (Problem 1). I don’t know what causes it. Firefox, on the other hand, seems to be trying to print as if it’s smaller-scale responsive–because it collapses the menu–goodness knows why. The featured circles look a complete mess. It seems to be trying to print larger featured images in a smaller space (Problem 2).

I also still can’t figure out why the tagline splits in Safari (Problem 3).

[Nor why the slider text prints in black (despite my attempts to change it with an !important)–but this is not really a big deal.]

For now, the CSS I can come up with to fix most of the problems above is:

/* Fix print format bugs */
@media print {
  a[href]:after {
    content: "";
    }
  abbr[title]:after {
    content: "";
    }
  @page {
    margin: 1cm;
    }
}

@nikeo: I suspect the hyperlinks were put there for testing. Could you take them out in a future release? The page margins (at least the top and bottom ones, anyway) also need to be changed as above to fit in with default headers and footers on the printed page (1cm works).

@everyone else: Can anyone figure out solutions to problems 1,2,and 3?

I agree with @electricfeet. This is a bug in need of a fix. Dealt with the same issue back in June while integrating Customizr with phpBB forums. The Customizr CSS plastered these link-extensions all over the place, rendering the phpBB install almost useless. The folks at phpBB community board quickly pointed to the theme CSS.

I ended up helping myself out, marking my own support request as resolved ..

——–

The “bug” was found in the style sheet for the Customizr theme. It appears CSS offers an attr(href) which is useful for displaying urls after a link, without having to write it. I’d never heard of that thing before. The workings of this attribute is explained at ..

paulund.co.uk : Learn How To Display URL After Link With CSS

Except, that’s exactly what I don’t want! Searched the css and found this little freak ..

/** a[href]:after {
content: ” (” attr(href) “)”;
} **/

.. thus marked out. Bingo. Problem gone. And I do not see how it’s of any loss to the rest of the theme. Begs the question why it was stuffed in there in the first place. End of story is seamless integration WP + phpBB.

——–

Wonder if this is the end of it, or whether the attr(href) wreaks hovoc elsewhere.

@electricfeet I am gonna fix this point in the next release.
Thanks for this analysis