Allign one Image left and one Image right in PDF Export Header

[Sascha Peter Dobrowolski]

Hey Guys...

I´m kinda new to the whole confluence thing and have the task to set a global PDF-Export Header in Confluence.

The header will contain 2 images. One should be alligned to the left, one should be alligned to the right.

I´ve tried plenty of things in HTML but was not able to get a halfway decent result till now...

Can anyone provide quick advice and tell me what the best practice on doing this is?

Last thing i tried was the following which led to the second image being alligned to the right, but in a row below the first image (because of the div of course).

1.  <div style="margin-top:10mm; text-align:left">  
2. <img src="IMAGE1" style="width:145px;height:50px;"/>  
3. </div>  
4. <div style="margin-top:10mm; text-align:right">  
5. <img src="IMAGE2"  style="width:145px;height:50px;"/>  
6. </div>  

I also lso tried encapsulating this into a table but then the images stick together on the left :/

Thanks in advance!

[Tom Rough · Accepted solution]

Hi Sascha, would using an app for your PDF exports also be an option? If so, we (K15t) develop Scroll PDF Exporter which allows you to customize how your exports are generated from Confluence. Within export templates that you can configure, you can define the formatting for the header and footer in your exports meaning that you could have different images both left and right aligned. If you are interested and want to learn more about the app you can check out our Help Center or alternatively, you can also evaluate the app for free from the Marketplace. Hope this information helps. Thanks, Thomas (K15t)

[Sascha Peter Dobrowolski]

Hi Thomas,

by now i also came to the conclusion that a plugin would be the easy choice.

I´ll try some more things today and if this doesn´t work aswell ill suggest buying the plugin.

Thank you for your reply!

[Sascha Peter Dobrowolski]

I now scrapped all of the HTML and went over to the Stylesheet....

There i added the following:

@page
{
@bottom-left
{
content: "Seite " counter(page) " von " counter(pages);
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 8pt;
}
@Top-left
{
<img src="/download/attachments/5144622/IMAGE1.png>
}

@Top-right
{
<img src="/download/attachments/5144622/IMAGE2.png>
}
}

Pagecounters work but i dont see the images....Any advice?

[Steffen Heller]

In the first example you must use "position", not "text-align": 

https://www.w3schools.com/css/css_positioning.asp

In the second example you must use "background-image", not "img":

https://www.w3schools.com/cssref/pr_background-image.asp