PDF Export customization

[Francesco Steccanella]

Hi,

I'm trying to customize header and footer of a single page pdf export.

I'm mainly focusing on this guide: https://support.atlassian.com/confluence-cloud/docs/advanced-pdf-export-customizations/

Here is stated that changing header and footer on the single page is not directly supported and is possible only through CSS adding the "content" rule:

@page
{
  @top-center
  {
    content: url('/download/attachments/xxxxxx/header.png');
  }
  @bottom-center
  {
    content: url('/download/attachments/xxxxxx/footer.png');
  }
}

but this totally breaks the PDF Export: 

Looking into the community there are a lots of different topics with the same argument, but no one is working.

Can someone help on clarifying the functionality and it's limits?

Thanks

PS: also space export seems to totally ignore the header and footer definition

PPS: i would avoid external plugin

[Sebastian Adam · Accepted solution]

Hi Francesco, you should try it with background-image instead of content.
We configured our PDF export that way and it is working fine:

{
background-image: url("/download/attachments/xxxx/header.png");
background-size: 130px;
background-repeat: no-repeat;
background-position: 0.47cm 1.27cm;
}

Maybe you can adapt this to your use case and see if it's working then.

[Francesco Steccanella]

Hi Sebastian,

thanks!

To which element should I attach this css? on page does not have any effect and if i put top-center I got the "We couldn't complete you export." exception

ie:

page
{

background-image: url("/download/attachments/xxxx/header.png");
background-size: 130px;
background-repeat: no-repeat;
background-position: 0.47cm 1.27cm;

}

or 

page

{

top-center{

background-image: url("/download/attachments/xxxx/header.png");
background-size: 130px;
background-repeat: no-repeat;
background-position: 0.47cm 1.27cm;

}

}

Maybe i am missing some margin?

Thanks

[Sebastian Adam]

Here you go with our full PDF stylesheet. Hope that helps:

@page
{
/*The A4 paper size is 210 mm wide by 297 mm long*/
size: 210mm 297mm;
margin-top: 2.54cm;
margin-bottom: 2.54cm;
margin-left: 1.27cm;
margin-right: 1.27cm;

@top-left
{
background-image: url("/download/attachments/xxx/xxx-logo.png");
background-size: 130px;
background-repeat: no-repeat;
background-position: 0.47cm 1.27cm;
}
@bottom-right
{
content: "Page " counter(page); /* This is the content that will appear in the footer on the right */
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 6pt;
}

h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
page-break-before: always;
}

h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
page-break-before: always;
}

h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
}

[Francesco Steccanella]

Hi @ADAM_ Sebastian 

Thank you so much!!

I really can't understand why I was receiving export exception before, but now thanks to your example I was able to adapt the CSS.

Thanks again!

[Camila Lorena Reyes]

Hi!! Thanks for the example! I need to edit the size of the letters in the body, how can I do that? Thanks!