All Collections
Hardware & Sofware
Browser
Setting CSS in Paper Size A4
Setting CSS in Paper Size A4

Common CSS Settings for Customize A4 Invoice

Christian Wijaya avatar
Written by Christian Wijaya
Updated over a week ago

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 :

Login DealPOS Tools

Step 2. Go to Advanced Menu

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

Go to Advanced Menu

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 :

Resize Store Name

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 :

Customize Font Type for Store Name

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 :

Move Payment Method into Right

IV. Adjust Terms & Conditions to be Upside

CSS Code :

p {

margin-top: -75px;

margin-bottom: 1rem;

}

The output will be like this :

Adjust Terms & Conditions to be Upside

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 :

Change All Font on Invoice

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 :

Change Invoice Number Font

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 :

Adjust Date / Give Space Between Invoice & Date Table

You might also like to read this article :


dealpos-trial-indonesia

Did this answer your question?