PDF Export customization
Asked by 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:

![error.png](/t5/image/serverpage/image-id/258613iD5569E9E6920B12D/image-size/large?v=v2&px=999 "error.png")

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


Answers:
author: Sebastian Adam
body: 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.

comments: author: Francesco Steccanella
body: 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


author: Sebastian Adam
body: 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;
}
}
```


author: Francesco Steccanella
body: Hi [@Sebastian Adam](/t5/user/viewprofilepage/user-id/4095962)

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!


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


Tags: cloud

confluence-cloud