Bosan Tampilan Default? Rahasia Kustomisasi Warna & Skala Parallax via Injector!
Kustomisasi visual Laxy.Motions tidak lagi dilakukan secara manual dengan merombak ribuan baris kode CSS. Sistem membagi konfigurasi tampilan menjadi dua file konfigurasi JavaScript yang aman: theme-injector.js untuk mengontrol warna, kepekatan overlay foto, dan tipografi seksi; serta style-injector.js untuk mengatur skala, pergeseran posisi (offset), dan rasio rendering foto parallax 3D.
Bayangkan Anda memiliki klien pernikahan adat Jawa (misal: Andy & Zhea) yang menginginkan nuansa undangan didominasi warna hijau daun sage dan krem hangat, bukan warna cokelat kayu bawaan. Selain itu, foto cover prewedding mereka terancam terpotong di layar HP karena wajah mereka berada agak ke atas. Dengan menyunting nilai warna di theme-injector.js dan menggeser cover_top di style-injector.js, undangan seketika berubah menjadi hijau sage yang presisi tanpa merusak layout HTML.
✨ Keunggulan Sistem Modular Injector
- Aman dari Bentrokan CSS: Variabel diinjeksi secara dinamis ke tingkat teratas dokumen (DOM root), sehingga warna tema tidak akan tertimpa atau hilang saat template diperbarui.
- Kontrol Skala Presisi: Rasio zoom awal foto di seksi parallax cover dan penutup dapat dikunci secara matematis agar tidak pecah/blur saat scroll.
- Kemudahan Re-Branding: Vendor dapat dengan mudah meluncurkan puluhan variasi warna undangan baru hanya dengan menduplikasi objek kustomisasi ini.
🛠️ Panduan Kustomisasi Objek TEMPLATE_THEME & TEMPLATE_STYLE
Langkah 1: Mengatur Warna & Tipografi di theme-injector.js
Buka file assets/js/theme-injector.js menggunakan code editor. Anda akan melihat objek utama bernama TEMPLATE_THEME. Sunting parameter-parameter berikut sesuai kebutuhan. Nilai bawaan warna dan overlay berbeda di setiap template, jadi tabel di bawah menampilkan nilai dari keempat template:
| Variabel | Jawa | Bali | Banjar | Minang | Fungsi & Nilai Aman |
|---|---|---|---|---|---|
| color_bg | "#faf8f5" | "#faf8f6" | "#faf8f5" | "#faf7f2" | Warna latar belakang utama untuk seksi konten standar (terang). |
| color_bg_warm | "#f5f0e8" | "#f4efe6" | "#f5f0e8" | "#f5ede0" | Warna latar bergantian (krem hangat) agar transisi antar seksi terlihat dinamis. |
| color_accent | "#b8956a" | "#8ca38a" | "#e2b714" | "#c49033" | Warna aksen utama untuk ornamen, link, garis, dan tombol pemicu. Ubah nilai hex ini untuk mengubah warna dominan tema undangan secara instan. |
| overlay_base_color | "#2c2824" | "#14221f" | "#230709" | "#241111" | Warna dasar bayangan gelap di atas foto prewedding. Gunakan warna hijau tua #1a2518 untuk outdoor/kebun, biru malam #12202a untuk pantai, atau cokelat gelap #2c2824 untuk tema netral. |
| overlay_top_opacity | 0.76 | 0.70 | 0.75 | 0.70 | Tingkat kepekatan gelap di area atas foto prewedding agar teks undangan dapat terbaca kontras. Nilai aman: 0.4 s.d. 0.85 (0 = bening, 1 = hitam pekat). |
| cover_inisial_size | "2.6rem" (sama di keempat template) | Ukuran huruf inisial besar mempelai pada layar cover (contoh: "A & Z"). Nilai aman: "2.5rem" s.d. "7rem". |
|||
| section_body_size | "17px" (sama di keempat template) | Ukuran teks isi/paragraf biasa pada seluruh seksi undangan. Nilai aman: "14px" s.d. "20px". |
|||
Langkah 2: Mengatur Skala & Alignment di style-injector.js
Buka file assets/js/style-injector.js untuk menyunting objek TEMPLATE_STYLE. Parameter di sini berfokus pada kalkulasi penempatan koordinat dan dimensi area gambar parallax:
| Variabel | Nilai Bawaan | Fungsi & Nilai Aman |
|---|---|---|
| cover_scale | 0.65 | Skala perbesaran awal foto prewedding di halaman cover. Nilai aman: 0.3 s.d. 1.5. Nilai kecil membuat foto tampak menjauh, nilai besar membuat foto tampak lebih dekat. |
| cover_object_fit | "contain" | Cara gambar mengisi layar. "contain" menampilkan gambar utuh tanpa terpotong (menyisakan ruang di tepi layar); "cover" memenuhi seluruh layar namun gambar akan sedikit terpotong. |
| cover_top | "0" | Pergeseran foto cover dari batas atas layar. Masukkan nilai persentase tinggi layar (contoh: "5vh") untuk menggeser gambar ke bawah agar teks inisial tidak menutupi wajah mempelai pada foto. |
| closing_cover_scale | 0.75 | Rasio perbesaran gambar prewedding di section penutup undangan (closing). Nilai aman: 0.5 s.d. 1.5. |
- Gunakan Tanda Kutip pada String CSS: Nilai yang memiliki satuan CSS (seperti
"px","rem","vh","%") atau teks (seperti"contain") WAJIB diapit tanda kutip dua atau satu. Contoh:cover_inisial_size: "2.6rem". - Angka Murni Tanpa Kutip: Nilai skala (scale) dan tingkat kepekatan (opacity) ditulis berupa angka desimal murni tanpa tanda kutip. Contoh:
cover_scale: 0.65. - Selalu Backup: Sebelum mengotak-atik nilai injector, selalu buat salinan cadangan berkas asli agar jika terjadi salah tulis sintaks Javascript (seperti lupa tanda koma), Anda dapat mengembalikannya secara instan.
🔗 Modul Panduan Terkait
Lanjut ke panduan modul template visual lainnya:
💡 Pertanyaan Sering Ditanya (FAQ)
Hal ini terjadi karena Laxy menggunakan theme-injector.js untuk menyuntikkan variabel warna CSS secara dinamis langsung ke root DOM dokumen ketika halaman dimuat. Nilai dinamis di Javascript ini memiliki prioritas lebih tinggi daripada stylesheet statis. Kustomisasi warna tema wajib dilakukan pada objek TEMPLATE_THEME di berkas theme-injector.js.
Anda dapat menaikkan kepekatan bayangan gelap pada foto latar belakang. Buka berkas theme-injector.js, lalu naikkan nilai parameter overlay_top_opacity (bawaan 0.70 sampai 0.76 tergantung template, misalnya dinaikkan menjadi 0.85) untuk memberikan efek bayangan atas yang lebih gelap agar teks putih kontras dan mudah dibaca.
Ini disebabkan oleh kesalahan penulisan kode sintaksis Javascript (syntax error), seperti lupa menulis tanda koma pembatas antar baris variabel atau tidak menutup tanda kutip string. Tekan F12 pada browser, periksa tab Console untuk melihat baris error yang ditunjukkan, dan perbaiki kesalahan penulisan tersebut.