Customize Print invoice CSS

ERPNext
, , ,
1

Hi,

I need documentation for print format CSS, for example I have below invoice

image
image986×1390 54.8 KB

to be like this

image
image986×1390 59.1 KB

2

السلام عليكم

For a non-technical method to design print formats, you can use Print Designer as of V15
Otherwise you can create a custom print format or HTML blocks in your print format builder.

Non CSS solutions

  • Regarding the logo on the top you can use letterhead
  • For table column width try modifying the columns in the field properties of your child table doctype
  • For borders, use chrome developer console to get the class of the payment terms table and target it in your print format CSS

If you need a help in writing HTML/CSS/Jinja print formats DM me privately I will guide you.

1 Like
3

Hy @Omar_Mohammed

I hope you will find the solution by reading this post

Thank You!

1 Like
4

Thank you @Yamen_Zakhour @Mohammadali for your reply.
I implement it below table using an HTML block with CSS

image
image1026×399 25.3 KB

<style type="text/css">
    .myTable th {
        background-color: #ddd;
        color: black;
        width: 50%;
        font-size: 15px; /* Adjust the font size as needed */
    }
    .myTable td {
        font-size: 13px; /* Adjust the font size for table data cells as needed */
    }
</style>
<div class="itemDiv">
    <table style="width: 100%;" class="myTable">
        <tr>
            <th style="width: 5%; text-align: center; border: 2px solid black;">ر.ت</th>
            <th style="width: 55%; border: 2px solid black;">التفاصيل</th>
            <th style="width: 10%; text-align: left; border: 2px solid black;">الكمية</th>
            <th style="width: 15%; text-align: right; border: 2px solid black;">المجموع</th>
        </tr>
        {%- for row in doc.items -%}
        <tr>
            <td style="width: 5%; text-align: center;font-size: 10px; border: 2px solid black;">{{ row.idx}}</td>
            {%- if row.item_code == "نسبة الشركة" -%}
                <td style="width: 55%; border: 2px solid black; font-size: 12px;"><div style="border: 0px;">نسبة الشركة</div></td>
            {%- else -%}
                <td style="width: 55%; border: 2px solid black; font-size: 12px;"><div style="border: 0px;">{{row.custom_notes}}</div></td>
            {%- endif -%}
            <td style="width: 10%; text-align: left; border: 2px solid black; font-size: 12px;"><span>{{ row.qty }}</span></td>
            <td style="width: 15%; text-align: right; border: 2px solid black; font-size: 12px;">{{ row.amount }}</td>
        </tr>
        {%- endfor -%}
    </table>
</div>