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:
I don't have any other idea to get this working. Is there a known workaround?!?
Any help appreciated.
Thanx
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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;
}
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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 */
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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 */
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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%;
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thanks again.
I definitly should get more into CSS!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.