If the Invoice template we provide does not meet the expectations or requirements of the business transaction that occurs, you could use CSS/XML to customize the template. Kindly see the explanation in this article for the detailed steps, which are quite technical, and we will provide some commonly used customizations:
Step 1. Go to DealPOS Tools
You can Login to tools.dealpos.app by using your POS domain, username, and password :
Step 2. Go to Advance Menu
After you clicking Advance Menu, you can change the File Name into PaperSize8cm_custom.css :
Notes :
Copy the CSS Code down below to PaperSize8cm_custom.css box.
Table of Content :
I. Resize Store Name
CSS Code :
.invoice_mini h1, .invoice_mini h2, .invoice_mini h3, .invoice_mini h4, .invoice_mini h5, .invoice_mini h6, .sales_order_mini h1, .sales_order_mini h2, .sales_order_mini h3, .sales_order_mini h4, .sales_order_mini h5, .sales_order_mini h6 {
font-family: Arial !important;
font-size: 39px;
}
Notes :
You can customize font-size for adjust the size.
Output will be like :
II. Bold Store Name, Invoice Number & Total
CSS Code :
.font-weight-bold {
font-weight: 1000 !important;
}
Notes :
You also can customize font-weight size for adjustment.
The output will be like :
III. Resize Logo from Square to Rectangle
CSS Code :
.img-fluid {
height: 75px;
}
Notes :
You also can customize height size for adjustment.
Output will be like :
IV. Give Space between Total Amount & Footer
CSS Code :
.mt-2, .my-2 {
margin-top: 0.4cm !important;
}
Notes :
You can customize margin-top for adjustment..
Output will be like :
V. Change Invoice Font
CSS Code :
.invoice_mini, .sales_order_mini {
width: 264px;
margin: auto;
padding: 0 4px;
color: #000;
font-family: Verdana !important;
}
Notes :
You can change font-family for your invoice, for example : Arial, Times New Roman, Candara, Calibri, and many more.
Output will be like :
VI. Delete Row Space between Address and Phone Number
CSS Code :
br{content:' ';}
br:after{content:' ';}
Output will be like :
You might also like to read this article :
If you want to customize the A4 Invoice template, check this article : Setting CSS in Paper Size A4
To customize the receipt template, check this article : Customize Receipt Template for Printing
For configuration settings related to Customer Invoice printing, check this article : Customer Invoice Printing Configuration