Making Your Printed HelpDocs Look Nicer

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.

Taylor Sloane
Updated by Taylor Sloane

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, #sidenav, #related, #feedback, #breadcrumbs, #disqus_thread, .hd-admin-bar, hr {
display: none;
}

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

}
This code has not been tested on every template. It may need customizations by your developers in order to work properly for you.

What did you think of this doc?

Overriding the Font on Your Knowledge Base

Disabling Authorship and Updated Times

Get in touch

This site is protected by hCaptcha and its Privacy Policy and Terms of Service apply.