Single page PDF export with image in footer

Reto Eggenberger
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 2, 2014

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

6 answers

1 accepted

4 votes
Answer accepted
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 2, 2014

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 */ 
}
Reto Eggenberger
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 2, 2014

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.

0 votes
Luuk Honings November 6, 2019

Hi All :)

 

Late.... but for those still searching this topic, this worked for me using a smallish image (150x55px):

 

@pagetTeng
{
background-image: url(https://mylink-to-my-image);
background-repeat: no-repeat;
background-position: 16cm 0.5cm;
margin-top: 2cm; 

@bottom-left
{
content: "Copyright © 2019 - Blah";
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 8pt;
}

@bottom-right
{
content: "Page " counter(page);
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 8pt;
}
}

 

0 votes
Robert Förster April 25, 2017

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.

0 votes
Jeff Hamilton January 13, 2017

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 */
}

Robert Förster April 25, 2017

Comment removed and added as "suggested answer"

0 votes
Jeff Hamilton January 13, 2017

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 */

 

0 votes
Steffen Heller
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 2, 2014

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%;
Reto Eggenberger
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 3, 2014

Thanks again.

I definitly should get more into CSS!

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events