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

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

3 answers

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

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!

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. 

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!

Thanks Heather,

I'll look in to the add on. 

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

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?

As far as I remember, you can add something like

content: " ";

after the image.

 

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Apr 13, 2018 in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

2,831 views 27 11
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you