Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #6 : Merapihkan Styling CSS )

Kategori : Basic / Newbie's, Coding, Design Tags: Cara Membuat Theme Wordpress , Pada 14 Nov 2008 oleh F

Lanjutan dari seri Tutorial Cara Membuat Theme Wordpress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress lokal anda ( http://localhost/wordpress/ ).

Well, sudah 6 langkah. langkah selanjutnya apa?

Sebenarnya kami ingin terus lanjut ke langkah membuat file theme lain berdasarkan index.php sesuai dengan hirarki theme wordpress. Tapi sebelum masuk ke langkah itu, tadi kami mencoba mengakses tampilan latihantheme pada dua browser yang berbeda : FireFox ( yang kami wanti - wanti anda untuk gunakan untuk mendesain web ), dan Internet Explorer ( Browser “ajaib”. ahaha ), dan kami menyadari bahwa ada yang harus kita selesaikan *halah* terlebih dahulu :

Merapihkan Styling CSS latihantheme

Jadi begini. Di jagat internet, setidaknya ada 4 jenis browser yang paling sering digunakan : Internet Explorer (IE ), Mozilla Firefox ( FF ), Opera, dan Safari. Browser yang paling banyak digunakan adalah Internet Explorer. lebih dari 70% pengakses internet menggunakan IE sebagai browsernya. Sisanya, menggunakan Firefox, Opera, dan Safari.

Masalahnya adalah : Terkadang, tampilan website yang menggunakan CSS berbeda jika diakses menggunakan satu browser dan browser lainnnya. Hal ini disebabkan karena setiap browser menggunakan “caranya masing - masing” dalam memahami definisi CSS.

Note : buka wordpress lokal anda yang menggunakan latihantheme di Firefox dan Internet Explorer. Dapat perbedaannya?

See? ada beberapa perbedaan yang muncul ketika latihantheme diakses menggunakan FireFox dan Internet Explorer.

Well,setelah kami analisa, ketidak rapihan ini ternyata disebabkan oleh objek yang ID atau CLASS nya belum di definisikan. Maka dari itu, browser otomatis memberikan nilai default pada ID dan CLASS tersebut. Masalahnya adalah : nilai default tiap browser berbeda

Oke, ini perbedaan latihantheme yang diakses menggunakan IE :

title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran.
blog title kebesaran
konten list item pada sidebar “terlalu menjorok ke dalam”.
Title widget yang beda ukuran

mari atasi yang satu ini sekarang

title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran.

Masalah tabrak menabrak antar baris ini terjadi karena line-height title post mengikuti line-height yang kita set untuk <body> . Cara Mengatasinya :

ketik / copypaste kode ini ke style.css

.post h2{
line-height:1.2;
font-size:20px;
}

problem solved. Refresh browser anda

blog title kebesaran

Menyelesaikan masalah ini cukup mudah juga. Ketik / Copypaste kode ini :

#kepala h1{
font-size:20px;
margin:10px 0 10px 0;
}

konten list item pada sidebar “terlalu menjorok ke dalam”

cari #barsisi li ul{}. tambahkan margin:0; sehingga jadi seperti ini :

#barsisi li ul{
padding:0px;
margin:0;
}

Title Widget beda ukuran

ketik / copypaste kode ini ke style.css

.widgettitle{
font-size:20px;
margin:10px;
}

Hoho, sekarang baik di IE atau di FF tampilannya sudah rapih. Pada post selanjutnya kita bisa meneruskan pembahasan kita pada langkah selanjutnya.

Well, Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar

Enjoy!

Share on Facebook

------------------------------------------------------------------------------------

Anda merasa post di blog ini bermanfaat untuk anda?

Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !

Apa itu RSS? Kenali RSS di halaman ini

Bloggingly