Making Your Printed HelpDocs Look Nicer

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 Settings >Ā Code > 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?

Making Video Embeds Responsive

Get in touch

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