Custom PDF Stylesheet Headers/Footers

Sam Hall
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 2, 2014

I've just tried creating a PDF stylesheet, I'm looking for a way to use something like "content: element(title-text);" to put the page title on top of every page (so I need some dynamic cleverness). Can someone point me in the right direction please? I couldn't find the temporary html files supposedly created on the server to see what the exact id of the title element is.

I've also tried element(footer) without much luck. The PDF Layout screen says "PDF Space Export Footer", I'm not actually interested in entire space exports, is that why this doesn't seem to work? I have a rather complex chunk of HTML I'd like to include on the footer of each page.

1 answer

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes
Answer accepted
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 2, 2014

Hi Sam,

there is a working example for how to move the page title to the header at https://answers.atlassian.com/questions/16168/how-can-i-pull-in-the-page-title-to-the-pdf-export-header

Add this to your PDF stylesheet

@page {
@top-center { 
content: element(runningheader);
}
}
.pagetitle h1 {
position: running(runningheader);
}

Generally you can move every html element from the confluence wiki page to any position of the created PDF document. To do this it needs two steps:

  1. Define the html element as a "Running header" or footer.
    You can do this by adding a "position: running(xyz)" to your stylesheet (with
    "xyz" being a freely definable name).
  2. Move this html element to a position in the header/footer with "content: element(xyz)" (with "xyz" being the exact same name as defined above)

So doing this with ".pagetitle h1" (as in the example above) should move the page title to the header. Doing the same with h2, h4, .myownclass, etc. should move the content of h2 or h4 headers or the content of a .myownclass class to the header.

I think you can also define multiple running headers and combine them with

content: element(xyz1) element(xyz2) element(xyz3);

But you might get an unwanted line break between these elements and I am not aware how to get rid of that.

Sam Hall
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 13, 2014

I used this technique for a while, also using a background-image:url() style to get a logo to appear. I was never fully satisfied with the quality of the image due to the fact the PDF generator doesn't support scaling background images.

What I'm now doing is using a User Macro to output PDF specific style information and also injecting the header and footer HTML elements I need. It's specific to the page that includes the macro, but that's what I wanted anyway. Figured here's as good as any place to share it incase someone else has a use for something similar...

http://pastebin.com/7Nwcc652

AdrianaF November 18, 2014

Sam, I am using your macro posted at the link above. Could you please guide me and tell me how to add the current date to the footer? I tried the following, but it doesn't work: <td class="confluenceTd" style="border:none;text-align:right"> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = Date(); </script> </td>

AdrianaF November 18, 2014

Also, any idea how to remove the table border from the export?

TAGS
AUG Leaders

Atlassian Community Events