All Collections
Hardware & Sofware
Browser
Setting CSS in Paper Size 8cm
Setting CSS in Paper Size 8cm

Common CSS Settings for Customize 8cm 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 tools.dealpos.app by using your POS domain, username, and password :

Login to DealPOS Tools

Step 2. Go to Advance Menu

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

Advance Menu

Notes :

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

Table of Content :


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 :

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 :

Bold Store Name, Invoice Number & 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 :

Resize Logo from Square to Rectangle

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 :

Give Space Between Total Amount & Footer

V. Change Invoice Font

CSS Code :

.invoice_mini, .sales_order_mini {

width: 264px;

margin: auto;

padding: 0 4px;

color: #000;

font-family: Verdana !important;

}

Notes :

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

Output will be like :

Change Invocie Font

VI. Delete Row Space between Address and Phone Number

CSS Code :

br{content:' ';}

br:after{content:' ';}

Output will be like :

Delete Row Space between Address and Phone Number

You might also like to read this article :


dealpos-trial-indonesia
Did this answer your question?