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

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).

<div style="margin-top:10mm; text-align:left">
<img src="IMAGE1" style="width:145px;height:50px;"/>
</div>
<div style="margin-top:10mm; text-align:right">
<img src="IMAGE2" style="width:145px;height:50px;"/>
</div>

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

Thanks in advance!

Accepted answers

Tom Rough

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)

All comments

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