Making your printed HelpDocs look nicer

Jake Peters Updated by Jake Peters

Users can print your articles using the regular browser flow (Ctrl/Cmd-P). You can make their printing experience nicer by adding a print stylesheet. This is some CSS that only gets loaded when printed, not when viewed online.

Here's a print stylesheet we've adapted from noupe to make your printing look great. Feel free to edit to your heart's desire!

You'll need to paste this into SettingsCode > CSS
You can also export PDFs of single and multiple articles from the dashboard
@media print {

#content, #page {
width: 100%;
margin: 0;
float: none;
}

@page { margin: 2cm }
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}
h1 {
font-size: 24pt;
}
h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}

a {
page-break-inside:avoid
}
blockquote {
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}
img {
page-break-inside:avoid;
page-break-after:avoid;
}
table, pre {
page-break-inside:avoid;
}
ul, ol, dl {
page-break-before:avoid;
}

a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a {
page-break-inside:avoid
}
a[href^=http]:after {
content:" <" attr(href) "> ";
}
$a:after > img {
content: "";
}
article a[href^="#"]:after {
content: "";
}
a:not(:local-link):after {
content:" <" attr(href) "> ";
}
#footer a:after {
content: "";
}

.entry iframe, ins {
display: none;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
line-height: 0pt !important;
white-space: nowrap;
}
.embed-youtube, .embed-responsive {
position: absolute;
height: 0;
overflow: hidden;
}
#header, #related, #feedback, #breadcrumbs, #disqus_thread, .hd-admin-bar, hr {
display: none;
}

p, address, li, dt, dd, blockquote {
font-size: 100%
}
code, pre {
font-family: "Courier New", Courier, mono;
}
ul, ol {
list-style: square;
margin-left: 18pt;
margin-bottom: 20pt;
}
li {
line-height: 1.6em;
}

}

What did you think of this doc?

Getting Help with Code Snippets

Get in touch