Single page PDF export with image in footer

Hi all

I know it has been discussed before, but I want to be sure, that I don't miss anything.

Problem:

We have a Space where we do a lot of single page PDF exports. And we really would love to have our logo in the page footer.

Sounds pretty straight forward and it's really astonishing to me, that this isn't possible. Or at least I can't find out how.

This doesn't work:

  • Space export footer
    Only works for exports through the space-tools. Well, you can choose to only export one single page. But this is not really user-friendly. Espacially if you have got the export link right in the tools dropdown.
  • CSS PDF Stylesheet
    You can place a image through the CSS stylesheet using @page@bottom-left rules. But this doesn't work for us, because our logo has the width of the whole page. And there doesn't seem to be a @page@bottom rule.

I don't have any other idea to get this working. Is there a known workaround?!?

Any help appreciated.

Thanx

5 answers

1 accepted

You can define the logo as background image so it will cover the whole page's width:

@page {  
background-image: url(/path to/yourLogo.png);
background-repeat: no-repeat;  
background-position: left bottom;
margin-bottom: 4cm; /* enough margin to not have text area and footer overlap */ 
}

Thank you very much. I didn't think of this method!

With my first test, the image is now way to large and I have to include some whitespace underneath the logo, so it doesn't sit on the page edge. But that's fine for me.

Thanks for this good workaround.

Off course, you can change the position of the logo when it is on the edge of the page. Try something like

background-position: left 90%;

Thanks again.

I definitly should get more into CSS!

I have everything working but the logo does show. I am adding a full URL. could that be the issue?

background-image: url(http://www.somedomain.com/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
margin-top: 2cm; /* enough margin to not have text area and footer overlap */

 

I added the code to the "Global PDF Stylesheet" but my logo still does show. I tried to increase the margin and that didn't work. Can I use outside URLs?

 

@page
{

background-image: url(https://www.somedomain.com/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
margin-top: 2cm; /* enough margin to not have text area and header overlap */

@bottom-center
{
content: "© Copyright Company, Inc."; /* This is the content that will appear in the footer */
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 6pt;
}
/* Any other page-specific rules */
}

Comment removed and added as "suggested answer"

Jeff,

I had the same problem you are facing - although I added a logo as bg-image it did not show up. I found out that it worked when I added a "content" attribute containing "\00a0" (=Whitespace) and set the width to an appropriate level.

I don't know if it's the correct way to do it but at least it works!

Altogether my page-format looks like this:

 

@page
{
@top-right
{
content: "\00a0";
width: 200px;
margin-top: 10px;
background-image: url(pathToMyJPG);
background-repeat: no-repeat;
background-position:right center;
}
@bottom-center
{
content: "Page " counter(page);
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 8pt;
}
/* Any other page-specific rules */
size: 210mm 297mm;
}

 

Also: I've learned that the attribute "background-size" seems not to work within Confluence, so you will have to resize the image "manually" (within any picture-editing-software) before uploading it.

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,927 views 27 12
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