If you feel your invoice is not according to your taste or not according to your customer's taste, you can change it according to your needs, this method uses custom CSS / XML, in custom CSS / XML there you can change it to your liking and also according to your needs.

Step 1. Login into tools.dealpos.app

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 PaperSizeA4_custom.css :

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

I. Resize your Store Name

CSS code :

h2, .h2 {

font-size: 35px;

}

*you can customize font-size for adjust the size

Output will be like :

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.

Output will be like :

III. Move Payment Method into Right (Default: Left)

CSS code :

table.info {

border-collapse: collapse;

margin-top: 4px;

margin-left: 753px;

margin-right: -733px;

}

Output will be like :

Step IV. Adjust Terms & Condition to be upper

CSS code :

p {

margin-top: -75px;

margin-bottom: 1rem;

}

Output will be like :

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.

Output will be like :

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.

Output will be like :

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;

}

Output will be like :

Did this answer your question?