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 :

Setting CSS in Paper Size 8cm - Login into Tools

Step 2. Go to Advance Menu

After you clicking Advance Menu, you can change the File Name into PaperSize8cm_custom.css :

Setting CSS in Paper Size 8cm - Advanced Menu

Step 3. Copy CSS Code

Copy the CSS Code down below to PaperSize8cm_custom.css box

Table of Content :

I. Resize Store Name

II. Bold Store Name, Invoice number & Total

III. Resize Logo from Square to Rectangle

IV. Give Space Between Total Amount & Footer

V. Change Font on Invoice

VI. Delete Row Space Between Address and Phone Number


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 :

Setting CSS in Paper Size 8cm - Resize store name

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 :

Setting CSS in Paper Size 8cm - Bold store name, invoice number and total

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 :

Setting CSS in Paper Size 8cm - Resize logo

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 :

Setting CSS in Paper Size 8cm - Give space between total amount and footer

V. Change Font on Invoice

CSS code :

.invoice_mini, .sales_order_mini {

width: 264px;

margin: auto;

padding: 0 4px;

color: #000;

font-family: Verdana !important;

}

*you can change font-family for your invoice, for example : Arial, Times New Roman, Candara, Calibri, and many more.

Output will be like :

Setting CSS in Paper Size 8cm - Change font on Invoice

VI. Delete Row Space Between Address and Phone Number

CSS code :

br{content:' ';}

br:after{content:' ';}

Output will be like :

Setting CSS in Paper Size 8cm - Delete row space between address and number phone

You might also like to read this article :


DealPOS Trial
Did this answer your question?