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. Login into tools.dealpos.app

You can Login to the tools.dealpos.app by using your POS domain, username, and password :

Setting CSS in Paper Size A4 - Login into tools

Step 2. Go to Advanced Menu

After you click Advance Menu, you can change the File Name into PaperSizeA4_custom.css :

Setting CSS in Paper Size A4 - Advance Menu

Step 3. Copy the CSS Code down below to the PaperSize8cm_custom.css box

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:

Setting CSS in Paper Size A4 - Resize store name

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:

Setting CSS in Paper Size A4 - Custom font

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:

Setting CSS in Paper Size A4 - Move payment method

Step IV. Adjust Terms & conditions to be upper

CSS code :

p {

margin-top: -75px;

margin-bottom: 1rem;

}

The output will be like this:

Setting CSS in Paper Size A4 - Adjust terms & Condition

Step 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:

Setting CSS in Paper Size A4 - Change all font on Invoice

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:

Setting CSS in Paper Size A4 - Change font on Invoice Number

VII. Adjust Date to be lower / 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:

Did this answer your question?