Myfia On The Web
Beta Version

Modifikasi styling CSS dengan mudah

Last Updated :: Tuesday, 08 September 2009 15:40 by Riesurya@MOTW

Utak-atik styling css dapat menjadi pekerjaan yang menyenangkan (apalagi kalo di bayar :P ), 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:
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.

PS: please put source link if you want to embedded this article (or any others in MOTW) in your blog to respect my work and time, Thank you :)
Dont miss it, be the first get the latest article from Myfia On The Web