Kustomisasi CSS Website Anda Menggunakan Firebug – Dalam dunia desain web, dan bahkan jika Anda adalah hanya seorang blogger berharap untuk merubah beberapa hal kecil, ketika datang waktunya Anda tentunya perlu untuk merubah elemen di style sheet tema Anda. Mengetahui apa yang harus diubah dan di mana menemukannya, itu dapat menjadi tantangan terbesar, tapi ada alat yang sederhana yang tersedia yang merupakan senjata rahasia desainer web.
Anda dapat menggunakan ekstensi Firebug untuk Firefox Mozilla dan Firebug Lite untuk Chrome yang dapat membuat singkat pekerjaan dalam menemukan dan merubah elemen css dalam desain Anda. Ini melapisi kode yang diberikan situs Anda dalam sebuah layar split sehingga Anda dapat melihat dan mengubah HTML / CSS, sementara bisa langsung melihat perubahan.
Instalasi Firebug
Disini saya akan menjelaskan penggunaan Add-on Firebug dengan browser Firefox.
Pada browser Firefox, silahkan pilih menu Tools, pilih “Add-ons“
Kemudian silahkan Anda pilih “Get Add Ons“.
Ketikan “Firebug” dalam kotak pencarian.
Klik tombol Install untuk mengaktifkan Add-on Firebug.
Add-on Firebug sudah bisa dipakai.
Penggunaan Firebug
Pada browser silahkan aktifkan add-on bug berwarna orange terletak pada baris alamat bar di sebelah kanan atas. Silahkan Klik! akan membuka layar split secara horisontal. Halaman web Anda akan tampil di bagian atas, tetapi di bagian bawah akan menampilkan HTML dari halaman web Anda.
Seperti gambar di atas, pada bagian sisi kiri yang tampil adalah halaman HTML sedangkan sebelah kanan adalah CSS yang ditarik dari salah satu atau semua style sheet yang digunakan, tergantung pada elemen di HTML yang dipilih.
Banyak dari kode akan terlihat sehingga Anda dapat memilah dan memilih bagian untuk dilihat, namun bukan keseleruhan halaman sekaligus.
Arahkan kursor ke setiap baris sehingga akan menyoroti div di bagian atas layar, ini memudahkan untuk melihat setiap bagian.
Atau dengan cara lain, Anda bisa gunakan klik kanan pada bagian halaman web dan pilih “Inspect element”. Firebug akan segera menyoroti bagian ini di panel bawah.
Anda dapat merasa yakin dalam mengubah salah satu elemen untuk melihat apa yang terjadi. Semua ini akan mempengaruhi situs Anda secara langsung, ini hanya pandangan Anda seperti Anda melihat halaman. Tidak ada yang disimpan ke file tema.
Praktek Penggunaan
Untuk lebih memastikannya lagi, contohnya, berikut adalah bagaimana kita bisa melihat efek dari mengubah warna latar belakang. Klik pada tag body pada panel kanan firebug.
Di sebelah kiri, bagian body stylesheet ditampilkan.
Mengarahkan kursor ke kode warna hex numerik menunjukkan secara visual bagaimana warna yang muncul. Klik pada kode warna untuk mengeditnya. Seperti yang diperlihatkan pada panel kanan properti background-color: #fff;
yang akan diganti.
Di sini saya sudah mengetik di kode warna hex yang berbeda, mengubah latar belakang body dengan warna abu-abu diset dengan nilai #eee;
.
Jika saya klik untuk mengedit bagian apapun dalam style sheet, menekan tab akan menyisipkan baris baru di bagian tersebut, memungkinkan saya untuk menambahkan elemen baru.
Karena Firebug tidak menyimpan perubahan ke tema, Anda akan perlu menyalin perubahan yang telah dilakukan di Firebug dan paste ke dalam style.css tema Anda di tempat yang sesuai. Firebug juga akan memberitahu Anda nomor baris yang tepat di mana unsur-unsur tertentu muncul dalam file style.css.
Leave a Reply