Modifikasi styling CSS dengan mudah

Utak-atik styling css dapat menjadi pekerjaan yang menyenangkan (apalagi kalo di bayar 😛 ), dan juga sekaligus membuat jenuh.
Lho, bagaimana mungkin 2 hal berbeda bisa bersangkut paut begitu.
Ceritanya, Anda ingin mengubah tampilan website (ada yang bilang template, ada yang bilang theme, kalo saya menyebut-nya sebagai cetakan layout).
Merubah warna? Ubah posisi? (masa’ standar terus, sekali-kali cat style dong … he he he …emang beda? gubrak).

Modifikasi css styling dengan Firefox Extension

Peralatan:

untuk mengubah warna suatu website tentunya butuh alat bantu.

Kalo mau ubah-warna, tentu harus tahu pasti dimana styling-nya. Caranya mudah, mau tahu?

Pakai Firefox Extension Web Developer (sorry buat non-Foxer)
ada tools yang namanya Display Element Information.

Dari namanya aja bisa dikira-kira, buat apa, ya buat cari tahu apa sih styling element seperti header, body dll.
perhatikan gambar:

Misal kita ingin mengganti styling pada tulisan “Modifikasi css styling dengan Firefox Extension” (lihat gambar)

dari data element information tersebut diketahui bahwa teks diatas mempunyai hirarki styling sebagai berikut:
id = rightcolumn
class = contentpaneopen
dan format H3
dan untuk merubahnya yang perlu dilakukan adalah dengan menambahkan / atau mengedit (bila sudah dideklarasikan sebelumnya)
di file css (by default, namanya template_css.css,bisa beda tergantung selera dan settingan saat pembuatan template)

misal ingin dirubah warna-nya menjadi kuning (yang ngejreng sekalian), letaknya ditengah-tengah (center) dan text-nya huruf Kapital semua

bukan kode rahasia:

#rightcolumn .contentpaneopen h3{
color:yellow; text-align:center; text-transform:uppercase
}

dan hasilnya adalah sebagai berikut:

Penentuan element memegang peran yang penting, dan tentu saja sedikit banyaknya harus mengetahui css mendasar.

Pada contoh diatas, yang akan mengalami perubahan hanya element H3 yang terletak di #rightcolumn.
dengan penentuan lokasi deklarasi element styling yang tepat, trik ini bisa diterapkan untuk mendapatkan styling layout apapun.

so, selamat berkreasi.

Untuk trik bermain-main dengan css dapat dijumpai pada episode tips dan trik berikutnya.

Comments are closed.