How to add Page Title, an Image and Date to the PDF export Header
Asked by Heather Millar:

I want to be able to seen an image then centered page title and the current date (if possible) in the header in an exported PDF, so far I can only ever see one of the image or the title; the code I'm using for image and title is;

@page

{

@top-center {  
content: element(runningheader);  
}  
.pagetitle h1 {  
position: running(runningheader);  
font-family: OpenSansRegular, Verdana, sans-serif;  
font-size: 8pt;  
color:#9BCBEB;  
}  
@top-left {  
background-image: url(<http://10.1.1.144/download/attachments/1835422/PBS%20Logo%2070PC-2.jpg>);  
background-repeat: no-repeat;  
background-size:84px auto;  
background-position:left center;  
page-break-inside: avoid;  
}

Haven't got as far as even looking at the date possibility yet....

Thanks


Answers:
author: Steffen Heller
body: Hi,

you are on the right track but there are some problems with your code that you should try to sort out to get predictable results:

* you have 4 opening but only 3 closing curly brackets } so one of your definitions is not closed properly
* all the @positionings (@top-left/center/right) must be within the @page definition, whereas the .pagetitle h1 must be outside of it. You mixed that order.
* the background-image won't probably show at all when it is the only element within @top-left {...}

* "background-size" is CSS3 and most probably not supported by Confluence


author: Steffen Heller
body: @Heather Millar

Still some problems:

1. the image in @top-left doesn't show because it is the only element in @top-left (see point 3 of my original post)
2. as a result of that the content of @top-center (your title) moves to the left when there is no content in @top-left

I think you are better off putting your background-image to the page as a whole.

The following is a very condensed version of your CSS that did work when I tried it:

```
@page {      background-image: url(/download/attachments/{some_numbers}/{image-name}.png);    background-repeat: no-repeat;    background-position: top right; /*adapt position to your liking*/   @top-left {      content: element(runningheader);        }       }  .pagetitle h1 {    position: running(runningheader);    }
```

comments: author: Christine Diamond
body: Hi Steffen, re "the image in @top-left doesn't show because it is the only element in @top-left (see point 3 of my original post)"

Can you give an example of the syntax where the image url precedes the heading element in the top left?


author: Steffen Heller
body: As far as I remember, you can add something like

```
content: "&nbsp;";
```

after the image.


author: Heather Millar
body: Hi Steffen,

Thanks for your Answer! I have remedied some of this and now I am seeing the title - but @top-left not center, and now the title is there the image does not display - but it was fine when it was the only thing in the header. I've copied the whole code below in case you can see where I may have still messed up (I am fairly new to CSS, so bear with me!)

.pagetitle h1 {  
position:running(runningheader);  
text-position:center center;  
font-family: OpenSansRegular, Verdana, sans-serif;  
font-size: 8pt;  
color:#9BCBEB;  
}  
@page  
/\* Any @page-specific properties \*/  
{  
margin: .9in .5in; /\* Sets the page area for content \*/  
padding: 0em; /\* override default that breaks @bottom alignment \*/  
/\* Note: @page-specific header/footer settings override Space PDF Layout header/footer settings.\*/  
/\* @page-specific header settings \*/  
/\* This is a viable solution for having headers/footers in single page PDFs and space PDFs versus using PDF Layout Header (only space PDFs) but you have to put a background image in all the @top areas where you want the image to appear and size and position them using CSS background selectors. \*/  

@top-left {  
background-image: url(<http://10.1.1.144/download/attachments/1835422/PBS%20Logo%2070PC-2.jpg>);  
background-repeat: no-repeat;  
background-position:left center;  
page-break-inside: avoid;  
}  
@top-center {  
content:element(runningheader);  
}  
@bottom-center {  
text-align:center;  
font-family: OpenSansRegular, Verdana, sans-serif;  
font-size: 8pt;  
color:#9BCBEB;  
vertical-align:top;  
padding:15px 10px;  
display:inline;  
white-space:pre-line;  
content: counter(page) " of " counter(pages) "\\A  
? 2015 Pebble Beach Systems. All rights reserved. Company Registration No. 3944834. Pebble Beach Systems is a Vislink plc company";  
#white-space:nowrap; /\* single line for page info \*/  
}  
/\* Any other @page-specific rules \*/  
}

thanks!

comments: author: Genevie Lopez
body: Any luck with the current date? I'm trying to accomplish the same task as you. Where the current date of the export gets published on the title page.


author: Heather Millar
body: Hi, in the end it just didn't seem possible in the standard export, so we purchased the PDF Exporter Add On - this creates much better pdfs and gives you more options in the creation of them.

Hope that helps!


author: Genevie Lopez
body: Thanks Heather,

I'll look in to the add on.


author: Volker Weinreich
body: Hi,

look at the answer of [@Steffen Heller](/t5/user/viewprofilepage/user-id/781537) from 27-04-15 here: <https://community.atlassian.com/t5/Confluence-questions/Insert-current-date-into-Confluence-page/qaq-p/313517>.

The only drawback is, you have to put a user macro with current date on the page you want to export..


Tags: confluence-administration