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 :
Step 3. Copy CSS Code to the PaperSize8cm_custom.css box
Table of Content :
I. Resize your Store Name
CSS code :
h2, .h2 {
font-size: 35px;
}
*you can customize font-size to adjust the size
The output will be like this:
II. Customize Font Type for your 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;
}
*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 code)
CSS code :
div.print_container {
font-family: Calibri!important;
background-color: White;
}
*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 Font on Invoice Number
CSS code :
h1, .h2, .h3, .h4, .h5, .h6 {
font-family: Calibri;
font-weight: 400;
}
*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
