Your Logo, Header and Footer

Every printout opens with a header we build for you. You can put your own logo and tagline above it, add a footer after the article, or hide the parts you do not want.

What the Default Header Contains

Top to bottom, before the article itself:

Your header image, if you set one, capped and centered.
Your tagline, if you set one, under the image.
The page title, with a rule under it.
The source URL, so whoever reads the printout can find the page again.
The author and date, where we can find them.

Adding Your Logo

In the builder, set the page header to an uploaded image, give it the full URL of your logo, and add a tagline if you want one. On WordPress the same pair is in the plugin's settings.

The image needs to be reachable without signing in, because we load it when building the printout.

A Footer After the Article

There is no footer setting. Put one in your own markup with the pf-footer class, and hide it on screen so it appears only when printed.

<p class="pf-footer" style="display:none">
  <img src="/logo.png" alt=""> Reprinted from example.com
</p>

It sits after the article, not in the margin of every page. Margins belong to the browser, which is covered below.

print-header does the same job at the top of the page, for a banner you want on the printout but not on screen, and print-footer is an older name for pf-footer that still works.

A copyright line works the same way with the copyright class. Both are on choosing what gets printed.

Common Questions

How do I show the URL and date in the header or footer?#

It depends which header you mean, and this trips a lot of people up.

In the content. The source URL and the date are already there, under the title. If they are missing, either the page exposed no date we could read, or CSS on your side is hiding #pf-src or #pf-date.

In the page margins, alongside page numbers. Those are drawn by your reader's browser from its own print settings, and no website can turn them on or off. In Chrome they are under More settings, then Headers and footers, in the print dialog.

How do I remove the title or the source URL?#

With custom CSS. Both have stable ids, so one rule each.

#pf-print-area #pf-title,
#printfriendly #pf-title {
  display: none !important;
}

#pf-print-area #pf-src,
#printfriendly #pf-src {
  display: none !important;
}

Where that CSS goes is on custom CSS.

The wrong author or date shows, or none at all#

We look for them on the page and cannot always tell a byline from nearby text. You can point us at the right elements with authorSelector and dateSelector on the settings tag.

Adding a pf-author or pf-date class will not do it. Those keep an element from being cleaned away; they do not designate it. See telling us where the title, author and date are.

My logo does not appear#

Open the image URL in a private window. If it does not load there, it will not load for us either: the usual causes are a login-only media library, a hotlink protection rule, or a relative path where a full URL is needed.