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

Common CSS Settings for Customize 8cm Invoice

Syakri Ezzan Qomara avatar
Written by Syakri Ezzan Qomara
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?