Cara Menggunakan Browser HTML/CSS Inspect Tools

Assalamualaikum …

Tahukah anda cara merubah style css atau tampilan sebuah website secara cepat adalah menggunakan inspect tools.

Dengan inspect tools kita bisa memanipulasi elemen website, misalnya merubah ukuran huruf, tanpa mencari-cari file dan kode css mana yang harus dirubah.

Inspect tools akan menunjukkan perubahan apa yang anda lakukan pada kode apa dan di file mana, bahkan sampai ke baris kodenya. Selanjutnya anda tinggal meng-copy kode yang sudah di modifikasi, mencari file yang ditunjukkan inspect tools lalu mem-paste-nya di baris yang ditunjukkan. Mudah sekali kan?

Ok, langsung saja kita menuju langkah demi langkah menggunakan inspect tools.

1. Membuka Halaman Website

Sebagai contoh, kita buka halaman https://lombokmedia.web.id/jasa-pembuatan-tema-wordpress/. Kita akan memanipulasi judul halaman di header-nya.

2. Memilih Elemen HTML

Klik kanan pada baris/elemen judul yang akan di modifikasi, lalu pilih Inspect.

Kita juga bisa menggunakan shortcut Ctrl+Shift+I lalu menggunakan tombol Pick Element atau shortcut Ctrl+Shift+C.

3. Modifikasi Elemen

Pastikan anda sudah memilih elemen yang tepat. Dalam hal ini

<h2 class=”module-title font-alt”>Jasa Pembuatan Tema WordPress</h2>

Di layar browser akan terlihat elemen yang dimaksud tersorot ketika mouse di letakkan diatas elemen yang dipilih di layar inspect.

Di sisi kanan layar inspect akan tampil tag selector, property dan value CSS yang elemen yang terpilih.

Selanjutnya adalah melakukan modifikasi nilai (value) property CSS sesuai selector/elemen. Misalnya kita merubah warna elemen menjadi merah (color: red), merubah ukuran font menjadi 60px (font-size: 60px) dan ketebalannya menjadi 900 (font-weight: 900).

Perubahannya bisa anda lihat langsung saat merubah  nilai, seperti pada gambar dibawah ini.

Selanjutnya memindahkan hasil modifikasi ke file real.

Lihat pada kanan nama selector, terdapat nama file dan nomor baris yang harus dimodifikasi.Copy seluruh kode dari nama selector (.module-title) sampai tanda kurung tutup }.

Buka file style.css, dalam hal tema wordpress, di dalam folder tema. Kemudain cari kode-nya di baris 909. Paste dan Simpan.

Jika file CSS sudah di minify, menyebabkan referensi baris kode tidak relevan, anda harus menggunakan fitur search nama selector di code editor untuk menemukannya.

Ok, sampai disini dulu, selamat mencoba!