Printer Friendly CSS

Contribute UX
6

Sure. I’ve stripped out my theme specific tweaks, and what’s left are overall improvements.

Full code:

@media print {
/* remove items N/A for print
** visual clutter etc. */
  .avatar,
  .topic-avatar,
  .badge-category,
  .badge-category-bg,
  .badge-notification.clicks,
  header,
  div.ember-view.topic-above-post-stream-outlet.topic-above-post-stream,
  div.ember-view.topic-map,
  section.ember-view.post-menu-area.clearfix,
  div#topic-footer-buttons,
  div#suggested-topics,
  div#progress-topic-wrapper,
  #topic-progress-wrapper,
  div.nums,
  ._flyout,
  .ember-view.btn,
  #topic-progress,
  .quote-controls,
  #topic-closing-info,
  div.lazyYT,
  .post-info.edits,
  .post-action,
  .saving-text,
  .draft-text,
  #discourse-modal,
  div.read-state,
  div.read-state.read,
  .edit-topic,
  a.reply-to-tab,
  a.reply-new,
  div.has-pending-posts,
  div.time-gap,
  #bottom,
  #footer {
    display: none !important;
  }
  
/* bottom border to help separate posts */
  div.row {
    border-top: 1px solid #AAA;
  //  margin-bottom: -1px;
  }
  .cooked pre code { max-height: none; }
  #main-outlet { padding: 0 !important; }
  html,body { min-width: 0; height: auto; }
  .lightbox-wrapper img { max-width: 500px !important; height: auto !important; }
  .topic-body { width: auto; margin: 0; padding: 0; float: none; }
  .topic-post article.boxed .select-posts { width: auto; left: auto; right: 0; }
  .gap { width: auto; }
  .gutter { padding: 0; }
  
/* restyle div#topic-title */
  
  #topic-title {
    margin: 0;
    padding: 0;
  }
  #topic-title div div h1 {
    margin: 2.5em 0 0 0;
    padding: 0;
    float: left;
    font-weight: normal;
    font-size: normal;
  }
  
  a, a:visited {
      color:#DDD;
      font-weight:bold;
  }
  
/* hide OP Solved plugin stuff */
  div.ember-view.topic-after-cooked-outlet.solved-panel {
    display: none;
  }
/* localhost  - MOOT for production */
 // div.ember-view.topic-category-outlet.show-topic-category-location,
 // div.alert.alert-info.alert-emails-disabled,
 // div.profiler-results.profiler-left.profiler-no-controls {
 //    display: none;
 // }
}

The fastest way to see the changes is on a text comparison site like http://text-compare.com/.

###Display:none

  .badge-category,
  .badge-category-bg,
  .badge-notification.clicks,

Got rid of the category, its color bar, and the link click annotations. Once it’s ready for print, none of these are relevant.

 .post-info.edits,
 .post-action,

Made this more specific; hides the number of edits but brings the date back. I think dates on posts are very relevant even on printouts. Post-action hides the “three people liked this”.

#bottom,
#footer

I know, footer and bottom sections could be printed, but it tends to add an extra page while printing. I hate that. This is my revenge for all those wasted sheets of paper over the years.

###Border tweaks

/* bottom border to help separate posts */ 
div.row { 
border-top: 1px solid #AAA; 
// margin-bottom: -1px; 
}

I like the border thicker and darker, and the bottom-most one is wasted. So, I put it at the top instead, and removed the bottom margin to make it double thick. Lightened it up a bit. This is just my preference.

#topic-title div div h1 {
    margin: 2.5em 0 0 0;
    padding: 0;
    float: left;
    font-weight: normal;
    font-size: normal;
  }

Added some top margin for the title, looks better and prevents clashing with the browser date/title headers. Removed right margin, not sure what it was for (had no effect in my testing).

###Link style

a, a:visited {
      color:#DDD;
      font-weight:bold;
  }

Out of respect for laser printers, I restyled the links a bit. You can’t see blue in monochrome. Blue is useless on paper anyways, just a waste of color ink. Bold font yet light grey makes it easy to tell where a link was, without being visually distracting. Works equally well for color and B&W printers.

I also commented out the localhost bits… since it said moot for production and I didn’t know what the intent was.

2 Mi Piace