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 the tools.dealpos.app by using your POS domain, username, and password :
Step 2. Go to Advanced Menu
After you click Advance Menu, you can change the File Name into PaperSizeA4_custom.css :
Notes :
Copy CSS Code to the PaperSize8cm_custom.css box.
Table of Content :
I. Resize Store Name
CSS Code :
h2, .h2 {
font-size: 35px;
}
Notes :
You can customize font-size to adjust the size
The output will be like this :
II. Customize Font Type for Store Name
CSS Code :
div.print_container h1, div.print_container h2, div.print_container h3, div.print_container h4, div.print_container h5, div.print_container h6 {
font-family: Calibri!important;
background-color: White;
}
Notes :
You can change font-family to another font, for example: Arial, Times New Roman, Candara, Calibri, and many more.
The output will be like this :
III. Move Payment Method into Right (Default: Left)
CSS Code :
table.info {
border-collapse: collapse;
margin-top: 4px;
margin-left: 753px;
margin-right: -733px;
}
The output will be like this :
IV. Adjust Terms & Conditions to be Upside
CSS Code :
p {
margin-top: -75px;
margin-bottom: 1rem;
}
The output will be like this :
V. Change All Font on Invoice (Except Invoice Font)
CSS Code :
div.print_container {
font-family: Calibri!important;
background-color: White;
}
Notes :
You can change font-family to another font, for example: Arial, Times New Roman, Candara, Verdana, and many more.
The output will be like this :
VI. Change Invoice Number Font
CSS Code :
h1, .h2, .h3, .h4, .h5, .h6 {
font-family: Calibri;
font-weight: 400;
}
Notes :
You can change font-family to another font, for example: Arial, Times New Roman, Candara, Verdana, and many more.
The output will be like this :
VII. Adjust Date / Give Space Between Invoice & Date Table
CSS Code :
div.header_right table {
float: right;
border-collapse: collapse;
margin-top: 17px;
}
The output will be like this :
You might also like to read this article :
If you want to customize the 8cm Invoice template, check this article : Setting CSS in Paper Size 8cm
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
