Sudahkah Anda membuat CSS khusus untuk formulir Anda, tetapi belum dapat melihat gaya tersebut saat melihat situs Anda?
Dalam tutorial ini, kami akan menelusuri opsi untuk memecahkan masalah mengapa CSS Anda tidak berfungsi dan menawarkan solusi yang memungkinkan
Caching Peramban
Peramban akan sering meng-cache, atau menyimpan sementara, sumber daya dari situs web yang Anda kunjungi untuk meningkatkan kecepatan muat. Beberapa situs juga akan menggunakan plugin untuk caching tambahan. Sering kali ketika Anda tidak melihat gaya khusus di situs Anda, itu karena browser atau sistem lain telah meng-cache versi situs Anda yang lebih lama
Berikut adalah tutorial yang akan memandu Anda melalui semua langkah utama untuk menghapus cache situs dan plugin Anda
Jika menghapus cache browser sepertinya tidak berhasil, berikut adalah beberapa strategi tambahan untuk dicoba
Mencoba Peramban Lain
Setiap browser akan menyimpan cache sendiri dari situs yang Anda kunjungi. Dengan membuka situs Anda di browser lain (atau dalam mode pribadi yang ditawarkan oleh beberapa browser, seperti jendela penyamaran Chrome), Anda sering dapat melihat versi situs Anda yang tidak di-cache
Menanyakan Host Anda apakah Mereka Memiliki Cache
Beberapa host akan menyediakan caching untuk situs Anda langsung di server mereka, tempat file situs Anda disimpan. Jika Anda tidak yakin, Anda mungkin ingin menghubungi host Anda untuk menanyakan apakah mereka menyimpan cache situs Anda dan, jika ya, minta mereka menghapus cache itu untuk Anda
Mencoba Sumber Internet yang Berbeda
Kadang-kadang, hanya memuat situs Anda melalui sumber internet yang berbeda dapat membantu melewati cache yang ada. Jika Anda memiliki perangkat seluler dengan data yang tersedia, cara termudah untuk melakukannya adalah dengan mematikan sementara WiFi di perangkat Anda dan memuat ulang halaman
Format CSS tidak valid
CSS harus ditulis dalam format tertentu agar browser dapat memahaminya. Ada banyak alat online untuk memeriksa apakah CSS Anda valid, termasuk W3Schools CSS Validator. Ini adalah opsi yang sangat baik jika Anda memiliki banyak CSS khusus dan setidaknya sedikit pengalaman membuat CSS sebelumnya
Namun, jika Anda hanya menggunakan sedikit CSS, terkadang lebih mudah untuk melakukan pemeriksaan format cepat sendiri. Mari kita mulai dengan melihat cuplikan CSS yang valid
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; margin: 0 0 10px 0; }Inilah mengapa CSS ini valid, atau 'dapat dibaca' oleh browser
- Format pemilih yang benar. Jika pemilih menyertakan beberapa bagian, itu harus ditulis dari 'terbesar' hingga 'terkecil'. Pada contoh di atas, div.wpforms-container-full_ adalah elemen penampung terbesar dalam HTML, sedangkan .wpforms-form ada di dalam penampung tersebut. Item terkecil dan terakhir dalam pemilih, .wpforms-title, terkandung di dalam kedua elemen lainnya. Dalam urutan lain, browser tidak akan dapat membaca pemilih ini
- Dua tanda kurung. Harus ada kurung kurawal pembuka ({) tepat setelah pemilih CSS dan di akhir daftar properti dan nilai. Melupakan braket penutup (}) adalah kesalahan umum, dan biasanya akan mencegah semua CSS di bawahnya ditampilkan di browser
- Titik dua dan titik koma. Pastikan untuk menyertakan titik dua (. ) di antara setiap properti dan nilai CSS, dan titik koma (;) setelah setiap nilai sehingga browser dapat membaca CSS Anda (misalnya, div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 0)
- Penggunaan spasi yang benar. Sebagian besar, CSS tidak terlalu pilih-pilih tentang spasi (termasuk tab dan spasi). Pengecualian untuk ini, bagaimanapun, adalah untuk unit. div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 1 akan bekerja, misalnya, sementara div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 2 tidak akan
Untuk informasi lebih lanjut tentang menulis CSS dengan sintaks yang tepat, Anda dapat melihat tutorial ini dari W3Schools
Kekhususan CSS
Karena semua tema dan sebagian besar plugin berisi kumpulan gayanya sendiri, Anda akan sering menemukan bahwa gaya khusus Anda harus "bersaing" dengan gaya yang ada. Dalam situasi seperti itu, pemilih CSS yang lebih spesifik hampir selalu menang atas pemilih yang kurang spesifik
Misalnya, inilah CSS default yang mengatur ukuran font judul formulir di WPForms
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } _Mari kita coba menimpa CSS itu untuk membuat font lebih besar. Mungkin tergoda untuk menggunakan pemilih CSS pendek, seperti ini
.wpforms-title { font-size: 40px; }CSS itu valid, tetapi gayanya tidak muncul di browser. Gaya default akan diterapkan sebagai gantinya karena mereka memiliki pemilih yang lebih spesifik. Sebagai gantinya, Anda harus menggunakan pemilih yang sama dan lebih panjang sebagai gaya default untuk CSS khusus Anda
Catatan. Untuk info lebih lanjut tentang pemilih, Anda dapat melihat daftar pemilih bidang formulir WPForms ini dan gaya defaultnya
Menggunakan. penting dalam CSS
Dalam beberapa situasi, Anda dapat memaksa cuplikan CSS yang kurang spesifik untuk berfungsi dengan menyertakan aturan div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 3 sebelum titik koma. Itu selalu lebih baik untuk mencoba pemilih yang lebih spesifik (seperti yang dijelaskan di atas) terlebih dahulu, tetapi terkadang ini dapat menawarkan perbaikan cepat
Namun, penting untuk diperhatikan bahwa menambahkan aturan div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 3 tidak akan selalu berhasil. Mari coba pendekatan ini untuk CSS yang kita bahas di contoh terakhir
.wpforms-title { font-size: 40px !important; } _Dalam situasi ini, browser lebih memilih kekhususan CSS default daripada aturan div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 3, sehingga CSS ini tidak akan diterapkan di situs Anda
Mari kita lihat contoh di mana menambahkan aturan div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 3 berfungsi. Secara default, tanda bintang (*) yang menandai kolom 'wajib' di WPForms akan berwarna merah
Inilah CSS yang menciptakan gaya itu (div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } _7 adalah kode hex untuk warna merah)
Kami ingin membuat tanda bintang ini tampak biru. Kita dapat menyalin pemilih penuh dari CSS di atas, atau kita dapat menggunakan pemilih pendek dan menambahkan aturan div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 3, seperti dalam cuplikan CSS ini
.wpforms-required-label { color: #007acc !important; }Mungkin sulit untuk mengetahui apakah aturan div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } 3 akan berfungsi atau tidak, jadi Anda mungkin perlu mencobanya dan mengujinya
Catatan. Jika Anda merasa ingin menulis lebih banyak CSS khusus untuk formulir Anda atau bagian lain dari situs Anda, pertimbangkan untuk memeriksa CSS Hero, sebuah plugin yang memungkinkan Anda menata formulir atau situs Anda dengan mudah tanpa kode
Itu dia. Kami telah membahas strategi pemecahan masalah paling umum untuk digunakan saat CSS tidak berfungsi. Jika Anda masih kesulitan mengatur gaya WPForms Anda, hubungi dukungan agar kami dapat membantu Anda
Selanjutnya, apakah Anda ingin menyesuaikan formulir Anda lebih lanjut?