How to add Page Title, an Image and Date to the PDF export Header

[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

[Steffen Heller]

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

[Steffen Heller]

@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);    
}

[Christine Diamond]

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?

[Steffen Heller]

As far as I remember, you can add something like

content: " ";

after the image.

[Heather Millar]

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!

[Genevie Lopez]

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. 

[Heather Millar]

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!

[Genevie Lopez]

Thanks Heather,

I'll look in to the add on. 

[Volker Weinreich]

Hi,

look at the answer of @Steffen Heller 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..