Kustomisasi Warna, Border, dan Padding Preview (LarisFont)

Cara mengatur Font Preview Text Color, Background, Border/Line, Input/Select, Padding global, Hide Font Preview Title, dan override via shortcode.

Section Font Preview Style di pengaturan global memungkinkan Anda menyesuaikan warna dan jarak di widget preview supaya selaras dengan branding toko font, tanpa perlu menambah CSS kustom.

Pengaturan global berlaku untuk semua instance preview. Untuk override per halaman, gunakan parameter warna di shortcode [larisfont_preview].

Opsi di Font Preview Style

Label di plugin	Fungsi
Font Preview Text Color	Warna teks yang diketik pengunjung di area preview
Font Preview Background	Warna latar belakang kotak preview
Font Preview Border/Line	Warna garis pemisah dan border area preview
Font Preview Input/Select	Warna latar field input teks dan dropdown pangram
Font Preview Padding	Jarak dalam (px) antara konten dan tepi kotak preview

Langkah mengatur warna global

Buka LarisFont → Font Tester/Preview → Settings.
Scroll ke heading Font Preview Style.
Klik color picker pada masing-masing field warna.
Pada Font Preview Padding, masukkan angka px (placeholder 0 = tanpa padding tambahan).
Simpan pengaturan.
Buka halaman produk di frontend untuk memverifikasi.

Menyembunyikan judul section

Judul dikontrol di section Font Preview Settings (bukan Style):

Opsi	Efek
Hide Font Preview Title dicentang	Judul tidak ditampilkan
Hide Font Preview Title tidak dicentang	Judul tampil; teks dari Font Preview Title Text (default: `Font Preview`)

Pada posisi tab WooCommerce (tabs-first/second/last), teks yang sama dipakai sebagai label tab.

Override per shortcode

Parameter shortcode mengalahkan warna global untuk instance tersebut:

[larisfont_preview id="123" color="#2C3E50" background="#F8F9FA" border="#E0E0E0" input="#FFFFFF"]

Parameter shortcode	Setara field global
`color`	Font Preview Text Color
`background`	Font Preview Background
`border`	Font Preview Border/Line
`input`	Font Preview Input/Select

Font Preview Padding hanya tersedia di pengaturan global (belum ada parameter shortcode padding).

Tips desain

Kontras teks vs background: pastikan Font Preview Text Color cukup gelap/terang dibanding Font Preview Background agar teks preview terbaca.
Tema gelap: background #1a1a1a, teks #f5f5f5, border #333333, input #2a2a2a.
Tema minimal putih: biarkan default atau gunakan border halus #DDDDDD untuk memisahkan preview dari deskripsi produk.
Padding 16–24 px biasanya cukup untuk area yang tidak terasa sesak.

Troubleshooting

Masalah	Solusi
Warna tidak berubah setelah simpan	Hard refresh; cek cache plugin/tema
Warna shortcode diabaikan	Pastikan format `#RRGGBB`; hindari nama warna CSS (`red`)
Input pangram sulit dibaca	Sesuaikan Font Preview Input/Select terpisah dari Font Preview Background
Padding tidak terlihat	Nilai 0 berarti minimal; coba `16` atau `24`
Judul masih muncul padahal ingin disembunyikan	Centang Hide Font Preview Title, atau shortcode `title_hide="yes"`