Continuing from the previous article about Printing in ERPNext, this time I will delve deeper into print customization. ERPNext goes beyond mere functionality; it also allows for personalization and branding, enabling you to incorporate your brand identity into every document. This includes adding a logo, letterhead, footer, and changing fonts.
1. Custom HTML
Following up on the previous article, we will dive deeper into Custom HTML and provide some HTML code examples.
<h1>Selamat Datang di Contoh HTML</h1>
<p>Ini halaman contoh HTML.</p>
Ini adalah kode untuk seksi 1, bisa dilihat <h1> dapat digunakan untuk header karena output textnya berukuran besar, dan untuk <p> dapat digunakan untuk paragraph teks karena berukuran lebih kecil.
<p>Ini adalah sebuah paragraf.</p>
<strong>Ini teks tebal.</strong>
<em>Ini teks miring.</em>
<span style=”color: blue;”>Ini teks dengan warna biru.</span>
Dan ini adalah kode untuk seksi 2, di seksi ini kodenya digunakan untuk memberikan style pada teks, terlihat <strong> untuk membuatnya menjad bold, <em> untuk menjadi italic, <span style=”color: > untuk memberikan warna pada teks.
<br><img src=”https://media.discordapp.net/attachments/385818110235508738/1196142810261360660/IMG_2535.jpg?ex=65b68dcd&is=65a418cd&hm=a032be31826f51cb56f34b75fdce979a2473e25f9b35d7d16c8b399fb609c0ce&=&format=webp&width=550&height=200″>
Ini adalah kode untuk seksi 3, bisa dilihat kode <img src=> adalah untuk memperlihat gambar, untuk mengganti gambar dengan yang anda ingin dapat diganti linknya dengan gambar yang anda inginkan.
<br><a href=”https://www.google.com”>Ini adalah tautan ke contohlink yang dapat di klik</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
Ini adalah kode untuk seksi 4, < a href=> adalah kode untuk membuat teks menjadi bisa di klik dan jika mengeklik teks tersebut akan di arah kan ke dalam link yang sudah diterterakan. Dan untuk kode <ul> adalah list pointer yang tidak berurut jadi berbentuk bulat,dan untuk kode <ol> adalah list pointer berurut jadi berbentuk angka, untuk menambah list dapat dengan menggunakan kode <li> untuk setiap barang/sesuatu yang ingin di list.
2. Menambah branding
Untuk menambahkan branding logo dan informasi-informasi tentang Perusahaan dapat diditambahkan dengan menggunakan Custom HTML, dengan kode <img> seperti contoh diatas.
<img src=”https://tobaconsulting.com/wp-content/uploads/2022/10/Toba-Red-And-Black-Logo.png”>
<br>Toba Consulting Services<br/>
Jl. Ruby No.29, RT.9/RW.13,
<br>Grogol Utara,
<br>Jakarta Selatan – 12210,
<br>DKI Jakarta<br/>
<br>Office : 021-53344009
<br>Mail : [email protected]
Contoh kode HTML dari gambar diatas.
3. Letter Head dan Footer
Untuk menambah Letterhead dan footing dapat dilakukan dengan masuk kedalam menu “Letterhead” yang terdapat di home.
Kemudian dapat membuat letterhead baru dengan mengklik “add Letter Head”
Setelah itu dapat di isi Name nya sesuai yang diinginkan, anda juga dapat memilih untuk Letterheadnya dan footernya dalam gambar atau HTML.
Kemudian dapat di save.
Disini anda dapat mengupload gambar yang ingin digunakan dan mengisi HTML dengan yang anda ingin.
<style>
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.social-icons {
list-style: none;
padding: 0;
margin: 0;
}
. social-icons li {
display: inline-block;
margin-right: 10px;
}
. social-icons img {
width: 30px;
height: 30px;
}
</style>
<footer>
<h3>Contact Us</h3>
<p>Office : 021-53344009</p>
<p>Mail : [email protected]</p>
<p>Feel free to reach out to us on social media:</p>
<ul> <li><a href=”https://www.facebook.com/TobaConsulting” target=”_blank”><img src=”https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg” alt=”Facebook”></a></li>
<li><a href=”https://wa.me/6282218181678″ target=”_blank”><img src=”https://www.freeiconspng.com/thumbs/logo-whatsapp-png/logo-whatsapp-png-transparent-background-8.png” alt=”Whatsapp”></a></li>
<li><a href=”https://www.youtube.com/@tobaconsulting-com” target=”_blank”><img src=”https://static-00.iconduck.com/assets.00/youtube-icon-512×512-nzpu9sn1.png” alt=”Youtube”></a></li>
<li><a href=”https://www.linkedin.com/company/tobacs/” target=”_blank”><img src=”https://cdn1.iconfinder.com/data/icons/logotypes/32/circle-linkedin-512.png” alt=”Linkedin”></a></li>
</ul>
</footer>
Diatas contoh kode untuk Footer.
Untuk memilih Letterhead terletak di disebalah kiri page printing. Maka akan terlihat seperti ini jika sudah dipilih.
<img width="1024" height="458" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150222-1024x458-1.jpg" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150222-1024x458-1.jpg 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150222-1024x458-1-300x134.jpg 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150222-1024x458-1-768x344.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<img width="1024" height="644" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150237-1024x644.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150237-1024x644.png 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150237-300x189.png 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150237-768x483.png 768w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-150237.png 1071w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>4. Mengganti Font</p>Untuk mengganti font dapat dilakukan dengan masuk kedalam Print Setting, terletak pada tombol titik tiga dalam page Print.
<img width="1024" height="243" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-171234-1024x243-1.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-171234-1024x243-1.png 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-171234-1024x243-1-300x71.png 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-171234-1024x243-1-768x182.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>Kemudian dipaling bawah page terdapat pilihan-pilihan font.</p>
<img width="1024" height="827" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-173218-1024x827.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-173218-1024x827.png 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-173218-300x242.png 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-173218-768x620.png 768w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-173218.png 1067w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>Dapat dipilih kemudian disave.</p>
<img width="792" height="884" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-153942.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-153942.png 792w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-153942-269x300.png 269w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-153942-768x857.png 768w" sizes="(max-width: 792px) 100vw, 792px" />
<p>Disini saya memilih font “monospace”, terlihat fontnya sudah berubah dari font default ERPNext pada page Print.</p>5. Custom Font
Jika anda ingin menggunakan font custom yang tidak terdapat di print setting anda harus menggunakan Custom CSS pada setting print format dan menggunakan Custom HTML pada Print Format Builder. Anda dapat memilih font yang ingin digunakan lewat Google Fonts(https://fonts.google.com/). Cara mendapat kan kode CSS dan HTML untuk font yang ingin digunakan seperti gambar dibawah. Saya memilih mamakai font Rubik Burned sebagai contoh.
<img width="1024" height="500" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140113-1024x500-1.jpg" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140113-1024x500-1.jpg 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140113-1024x500-1-300x146.jpg 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140113-1024x500-1-768x375.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>Setelah memilih font dapat klik tombol “Get Font”.</p>
<img width="1024" height="488" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140126-1024x488-1.jpg" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140126-1024x488-1.jpg 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140126-1024x488-1-300x143.jpg 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140126-1024x488-1-768x366.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>Setelah itu klik “Get Embed Code”.</p>
<img width="1024" height="494" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140139-1024x494-1.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140139-1024x494-1.png 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140139-1024x494-1-300x145.png 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-23-140139-1024x494-1-768x371.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>Kemudian dapat di copy codenya.</p>
<img width="1024" height="545" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-165758-1-1024x545-1.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-165758-1-1024x545-1.png 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-165758-1-1024x545-1-300x160.png 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-165758-1-1024x545-1-768x409.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>Kemudian anda dapat mengcopy code yang ditampilkan oleh google font, dan masukkan kedalam ERPNext, masukkan code CSS kedalam Custom CSS di page Print Format, class .print-format mencakup semua print format jadi akan menggantikan font untuk seluruh teks pada print format tersebut, seperti contoh code di bawah dan Digambar, setelah itu dissave. Kemudian dapat masuk kedalam Print Format Builder dengan klik tombol “edit format”.</p>.print-format {
font-family: “Rubik Burned”, system-ui;
font-weight: 400;
font-style: normal;
}
<img width="1024" height="742" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-155933-1024x742.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-155933-1024x742.png 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-155933-300x217.png 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-155933-768x556.png 768w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-19-155933.png 1277w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>Kemudian pada Print Format Builder anda dapat membuat Custom HTML dimana saja dan kemudian di dalam Custom HTML dapat di isi dengan code yang dari google font tersebut, Setelah itu dapat disave print formatnya dan kemudian masuk keprinting untuk check.</p>
<img width="747" height="781" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-170431.png" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-170431.png 747w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-170431-287x300.png 287w" sizes="(max-width: 747px) 100vw, 747px" />
<p>Dan hasilnya akan seperti ini dimana semua teksnya telah terganti fontnya.</p>
<img width="1024" height="551" src="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-170718-1024x551-1.jpg" alt="" srcset="https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-170718-1024x551-1.jpg 1024w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-170718-1024x551-1-300x161.jpg 300w, https://tobaconsulting.com/wp-content/uploads/2024/02/Screenshot-2024-01-16-170718-1024x551-1-768x413.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<h2>Share this article</h2>