[Help] Adding footer with text left and right

Support
1

Situation

I want to add a footer text which is separated left and right. In the middle should be nothing, at least not at the moment. I part achieved this with uncomplicated HTML code, which then is referenced in the custom-pdf.css file.

The thing is the text appears as said left and right but sadly not on one line. Which is very strange. Until now, I did not find a way to correct this, though I need to say my HTML and CSS skills are also not the best.

Any push in the right direction would be really appreciated! :blush:

Edit:
Installed on my server is Invoiceplane 1.6.1

Info:
I searched already the forum and found a few similar situations. But as said, it was not quite helpful because the situation was different, or the workaround was outdated because it was an older invoiceplane version.

Code Snippets

HTML code in footer settings:

<p class="copyright">Copyright Stuff.</p>
<p class="social">Social Links.</p>

CSS code in invoiceplane/assets/core/css/custom-pdf.css

.copyright {
  text-align: left;
}

.social {
  text-align: right;
}

Document reference

image
image878Ă—187 4.84 KB

Info:
The footer text is just a boilerplate and does not correspond to the end result.

1 Like
2

Try this:

<div>  <div style="float: left; width: 50%;">  <p>© 2024 All Rights Reserved</p>
  </div>
  <div style="float: right; width: 50%;">  <p>Text right</p>
  </div>
</div>

And if you keep that text-align:left (and right) they should be correctly aligned

1 Like
3

This is your alternative. It’s called flexbox

<div style="display: flex; justify-content: space-between;">  <div style="width: 50%;">  <p>© 2024 All Rights Reserved</p>
  </div>
  <div style="width: 50%;">  <p>Text right</p>
  </div>
</div>

Also here: keep your text-align the way you had it

1 Like
4

This worked flawlessly! Thank you very much!

I modified the code a bit and set the styling settings in the external assets/core/css/custom-pdf.css file.

HTML snippet for invoiceplane WebGui under System-Settings ⇒ Invoices ⇒ PDF Footer:

<div>
    <div class="left">
      <p class="footer-text">My example text on the left.</p>
    </div>
    <div class="right">
      <p class="footer-text">My example text on the right.</p>
    </div>
</div>

CSS modifications under assets/core/css/custom-pdf.css:

(...)

/* PDF footer design */                                                              
                                                                                     
.left {                                                                              
  text-align: left;                                                                  
  float: left;                                                                       
  width: 50%;                                                                        
}                                                                                    

.footer-text {
  color: #000000;     
}                                          

.right {
  text-align: right;
  float: right;
  width: 33%;
}
(...)

Note:
Forgot to mention, I needed to set a lower width for the right side because my text is a little longer. Else it wouldn’t be on one line or fully displaced.

There are only a few that I still miss, but they are also special wishes.:sweat_smile::

  1. Changing to a custom font, in my case Blex Mono.
  2. Having a dividing line between the two texts with a gradient from top to bottom.
    1. Optional: Also text has a gradient.
  3. Optional: Page number above or beneath the footer design

Example of wish number two:
Left Text -------------------------------------------Right text.

Legend:
----: Gradient line (from top to bottom)

Info:
When I solved my “problems”/special wishes, I would create a full-fledged
documentation in the Guide section of this forum. Of course, not without mentioning of you!

Edit:
Just added some additional information and corrected some grammar errors. Sorry for so many edits. I thought when we are already at it, I could add my (forgotten) ideas to it. Else just say it, I would make a new post. It still applies, as said, I would then put everything together in a big guide. :blush:

1 Like