# Printer Friendly CSS

**URL:** <https://meta.discourse.org/t/printer-friendly-css/30899>\
**Category:** UX\
**Created:** [July 8, 2015, 5:45pm UTC](https://meta.discourse.org/t/printer-friendly-css/30899 "2015-07-08T17:45:22Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![ky\_metro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ky_metro/32/42807_2.png) [@ky\_metro](https://meta.discourse.org/u/ky_metro)\
**Post date:** [July 8, 2015, 8:05pm UTC](https://meta.discourse.org/t/printer-friendly-css/30899/6 "2015-07-08T20:05:41Z")

</div>

> [@cpradio](#):
>
> Mind posting your tweaks here

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/](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.

---

_[View the full topic](https://meta.discourse.org/t/printer-friendly-css/30899)._