Kita sudah membahas pengaturan tema sebelumnya, dan Obsidian terlihat jauh lebih baik setelah memasang tema. Namun, banyak orang masih merasa ada yang kurang setelah mengganti tema—ukuran font terlalu kecil, spasi baris terlalu rapat, area catatan terlalu sempit… Detail-detail ini berada di luar cakupan tema. Bab ini akan membahas cara menyempurnakan dengan CSS Snippet.
Bab ini mencakup empat hal:
- Apa itu CSS—dapat dipahami bahkan tanpa pengetahuan coding
- Mengapa kamu tetap perlu CSS meskipun sudah menggunakan tema
- Biarkan AI menulis CSS untukmu—tinggal salin dan tempel
- Di mana meletakkan CSS dan cara membuatnya berfungsi
Apa itu CSS
CSS adalah singkatan dari Cascading Style Sheets. Kedengarannya teknis, tetapi logika intinya sederhana: CSS adalah sekumpulan aturan yang mengontrol tampilan sesuatu.
Contohnya:
- Teks ini harus menggunakan font, ukuran, dan warna apa?
- Seberapa lebar area ini? Berapa marginnya?
- Apa warna latar belakang saat di-hover?
Hampir semua efek visual yang kamu lihat di halaman web dikendalikan oleh CSS. Antarmuka Obsidian juga dibangun di atas teknologi web (Electron), sehingga CSS dapat digunakan untuk mengontrol tampilannya juga.
Tema yang kamu pasang pada dasarnya adalah paket besar CSS yang ditulis oleh orang lain. CSS Snippet adalah potongan kecil CSS yang kamu tambahkan sendiri, khusus untuk menyempurnakan hal-hal yang tidak dicakup oleh tema.
Tema adalah gaya keseluruhan; snippet adalah penyesuaian lokal. Keduanya tidak bertentangan dan dapat digunakan bersama.
Mengapa Masih Perlu CSS Meskipun Sudah Pakai Tema?
Tema menyelesaikan masalah “gaya keseluruhan”, tetapi banyak detail preferensi pribadi berada di luar cakupan tema—dan memang seharusnya begitu, karena preferensi setiap orang berbeda.
Beberapa skenario umum di mana tema tidak cukup:
Area catatan terlalu sempit: Banyak tema membatasi lebar maksimum catatan secara default, menyisakan ruang kosong besar di layar lebar dengan konten terjepit di tengah. Beberapa orang menyukai tata letak ini, yang lain menganggapnya boros.
Spasi baris terlalu rapat/longgar: Spasi baris default mungkin tidak nyaman bagimu, tetapi tema tidak memiliki opsi untuk itu.
Warna heading tidak sesuai: Kamu menyukai tema secara keseluruhan, tetapi warna H1 terlalu terang dan kamu ingin meredupkannya.
Elemen UI yang mengganggu: Misalnya, tombol yang tidak pernah kamu gunakan—kamu ingin menyembunyikannya.
Kebutuhan ini sangat spesifik dan personal. CSS Snippet adalah alat yang dirancang untuk menyelesaikan masalah “satu langkah terakhir” ini.
Tidak Perlu Menulis Sendiri—Biarkan AI Menulis untukmu
Ini adalah poin terpenting dari bab ini: Kamu tidak perlu belajar CSS sama sekali—biarkan AI menulisnya untukmu.
Prosesnya sangat sederhana: cukup beri tahu AI apa yang ingin kamu ubah:
“Tuliskan saya CSS Snippet Obsidian untuk mengatur lebar maksimum area konten catatan menjadi 900px”
“Tuliskan saya CSS Snippet Obsidian untuk mengatur spasi baris body menjadi 1.8”
“Tuliskan saya CSS Snippet Obsidian untuk mengubah warna H1 menjadi biru tua”
AI akan memberimu potongan kode CSS lengkap yang bisa langsung kamu salin dan gunakan.
Beberapa tips untuk mendapatkan hasil lebih baik dari AI:
- Sebutkan bahwa ini adalah CSS Snippet Obsidian, jika tidak, AI mungkin memberimu CSS web biasa dengan nama variabel yang salah.
- Minta AI untuk menambahkan komentar, katakan “Tolong tambahkan komentar di samping setiap properti yang menjelaskan fungsinya” sehingga kamu bisa memahami file-mu nanti.
- Ubah satu hal dalam satu waktu, satu file snippet untuk satu hal—lebih mudah untuk debugging dan mematikan secara individual.
Contoh percakapan:
Me: Write me an Obsidian CSS Snippet to set the maximum width of the note content area to 900px, please add comments.
AI:
.markdown-source-view, .markdown-reading-view {
/* Limit the maximum width of the note content area */
--file-line-width: 900px;
}
Selesai. Tidak perlu memahami sintaks CSS, tidak perlu mencari dokumentasi. Deskripsikan apa yang kamu inginkan, dapatkan kodenya, tempel, selesai.
Di Mana Meletakkan CSS? Bagaimana Cara Membuatnya Berfungsi?
CSS Snippet memiliki lokasi penyimpanan tetap. Ikuti saja langkah-langkah ini.
Langkah 1: Temukan folder snippets
Path: Root Vault → folder .obsidian → folder snippets
.obsidian adalah folder tersembunyi. Di Mac, tekan Command + Shift + . untuk menampilkan file tersembunyi. Jika folder snippets tidak ada, buat secara manual.
Tentu saja, kamu juga bisa mengaksesnya langsung dari Pengaturan.
Langkah 2: Buat file .css
Di folder snippets, buat file teks baru, ubah ekstensinya menjadi .css. Beri nama sesuai keinginan, tetapi disarankan menggunakan nama deskriptif seperti note-width.css atau line-height.css. Tempel kode dari AI ke dalamnya dan simpan.
Atau, kamu bisa membuka folder ini dan biarkan AI menulis file CSS langsung di sana.
Langkah 3: Aktifkan di Obsidian
Path: Pengaturan → Tampilan → CSS snippets
Gulir ke bagian bawah halaman, kamu akan melihat bagian “CSS snippets”. Klik ikon refresh di sebelah kanan, dan file yang baru kamu buat akan muncul di daftar. Klik toggle di samping nama file, toggle berubah warna, dan snippet mulai berlaku. Antarmuka berubah seketika, tidak perlu restart. Jika efeknya tidak sesuai, matikan toggle dan kembali periksa kode.
Bagaimana Saya Sendiri Menggunakan CSS
Berikut adalah beberapa snippet yang benar-benar saya gunakan, sebagai referensi.
Memperlebar area catatan – Ini yang paling sering saya gunakan—mengatur lebar maksimum area konten catatan menjadi lebih lebar, sehingga lebih sedikit ruang kosong di layar besar.
Menyesuaikan spasi baris – Spasi baris default agak terlalu rapat bagi saya, jadi saya menggunakan CSS untuk sedikit memperbesarnya agar lebih nyaman dibaca.
Menyembunyikan elemen yang tidak digunakan – Ada beberapa tombol dan ikon di antarmuka Obsidian yang tidak pernah saya gunakan. Saya atur menjadi display: none dengan CSS untuk menyembunyikannya, membuat antarmuka lebih bersih.
Penyesuaian gaya callout – Saya tidak suka warna default blok callout di tema tertentu, jadi saya menggunakan CSS untuk mengubahnya menjadi warna yang lebih lembut.
Keempat snippet ini disimpan dalam empat file .css terpisah, masing-masing dapat diaktifkan/nonaktifkan secara individual. Jika setelah beberapa waktu ada yang tidak cocok, cukup matikan—mereka tidak saling mengganggu.
Ringkasan
Apa yang kamu pelajari hari ini:
- CSS adalah aturan untuk mengontrol tampilan antarmuka; Obsidian menggunakan CSS Snippet untuk penyesuaian lokal.
- Tema adalah gaya keseluruhan; snippet adalah penyesuaian detail—keduanya bekerja bersama.
- Tidak perlu menulis CSS sendiri; beri tahu AI apa yang ingin kamu ubah dan salin kode yang diberikan.
- Jalur penyimpanan snippet: Root Vault →
.obsidian/snippets/→ file.css. - Aktifkan di Pengaturan → Tampilan → CSS snippets, toggle untuk mengaktifkan.
Poin penting:
- Mendeskripsikan kebutuhanmu ke AI untuk menulis CSS jauh lebih efisien daripada mempelajari sintaks CSS sendiri.
- Satu snippet untuk satu hal, memudahkan pengelolaan dan debugging.
- Toggle dapat dimatikan kapan saja—aman dan dapat dibalik, tidak perlu khawatir merusak antarmuka.