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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Single page PDF export with image in footer

Reto Eggenberger

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

Accepted answers

Steffen Heller

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

All comments

Steffen Heller

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

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.

Steffen Heller

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

Thanks again.

I definitly should get more into CSS!

Jeff Hamilton

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

Jeff Hamilton

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

Comment removed and added as "suggested answer"

Robert Förster

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.

Luuk Honings

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

confluence-administration