Invoice Layout with full width, right aligned columns and footer

apartments · Mon Dec 18, 2023 8:16 pm

Hello,

here is a little summary of my learnings about the

invoice layout with HTML code and CSS syling,

which I found neither in the wiki nor forum. In case of any questions or if it helps, please leave a reply

CSS styling to right align all number columns including their headers (Quantity, Price, VAT, VAT%, Total)

Insert the following code here:
Settings > Guest Management > Styling > Print Template Custom CSS:
Code: Select all
```
.conf_vattotal { text-align:right; }
.conf_subheadercenter, .conf_numbercenter{
text-align: right !important;
}
```

CSS styling to extend the invoice table to full page width

Insert the following code here to show the invoice table:
Settings > Guest Management > Invoicing > Invoice Template 1, 2 or 3 > edit > Quellcode (source code):
Code: Select all
```
[INVOICE:QTY_PRI_VAP_VAA_TOT_CUA€_VAT_GRT]
```

Insert the following code here to extend the width of the invoice table:
Settings > Guest Management > Styling > Print Template Custom CSS:
Code: Select all
```
table.confirmationtable{
width:920px !important;
}
```

CSS stying to stick the footer lines to the bottom of the page (does actually not work with multiple page invoices):

Insert the following code here to show the footer:
Settings > Guest Management > Invoicing > Invoice Template 1, 2 or 3 > edit > Quellcode (source code):
Code: Select all
```
<div style="text-align: center; position: absolute; bottom: -410px; left: 15%; "><span style="font-size:16px;"><strong>PUT HERE YOUR FOOTER LINES</strong></span></div>
```
Remark: <strong></strong> is optional to make the (part of) the footer bold.
Remark2: <span style="font-size:16px;"></span> is optional to put the font-size to 16px

Insert the following code here to stick the footer to the bottom of the page:
Settings > Guest Management > Styling > Print Template Custom CSS:
Code: Select all
```
#editor1{
height: 25.7cm;
display: grid;
grid-template-columns: 1fr;
}
```

HTML code to show either the company or the guest as well as the address in the window of the envelope:

Insert the following code here to show the invoice table:
Settings > Guest Management > Invoicing > Invoice Template 1, 2 or 3 > edit > Quellcode (source code):

Code: Select all

<div style="margin-left: 40px;"><span style="font-size:12px;">w724 UG - Ettlinger Str. 22 - D-76337 Waldbronn</span></div>

<p style="margin-left: 40px;"><br />
<span style="font-size:18px;">[IF=^[GUESTCOMPANY]^^[GUESTTITLE]<br />
~][IF=^[GUESTCOMPANY]^^[GUESTFIRSTNAME] [GUESTNAME]<br />
~][IF=^[GUESTCOMPANY]^^~[GUESTCOMPANY]<br />
][IF=^[GUESTCOMPANY]^^[GUESTADDRESS]~[GUESTADDRESS]]<br />
[IF=^[GUESTCOMPANY]^^[GUESTPOSTCODE]&nbsp;[GUESTCITY]~[GUESTPOSTCODE]&nbsp;[GUESTCITY]]<br />
[IF=^[GUESTCOUNTRY2]^DE^~[GUESTSTATE]<br />
][IF=^[GUESTCOUNTRY2]^DE^~[GUESTCOUNTRY]]</span></p>

However, there is still room for improvement and fine tuning like

While VAP shows 7% without decimals, VAT_GRT shows 7.00% with 2 decimals - no clue how to fix this inconsitancy.

Actually the footer is centered with "left: 15% and I assume that there is a better code with "centered" instead "left".

Finally, this is how our invoice looks like with the applied styling:
https://pasteboard.co/Havqzv3wGfps.png

Best regards,
Rico

rooms2rent · Mon Jul 01, 2024 2:14 pm

Thank you very much. I have been struggling with this for months, and that's the main reason why I haven't used Beds24. I always wondered if I was the only one who didn't like all the options.

Greets Dorian