[Help] Adding footer with text left and right

Support
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