18. Styling WPTutorial : Layout & Menu Navigasi

Theme latihan WPTutorial secara teknis sudah jadi sebagai theme. Namun, belum diolah lebih lanjut tampilannya. karena itu kita akan mencoba melakukan styling layout dan menu navigasi theme wptutorial langkah demi langkah.

Langkah 1 : Layout

Membuat layout lebih enak dilihat. Untuk itu, kita haru mengubah penampilan theme yang awalnya , apa adanya setelah jadi, menjadi lebih proporsional layout-nya. Jadi langkah pertama adalah membuat tampilan layout apakah sidebar-content, content-sidebar, sidebar-content-sidebar, sidebar-sidebar-content, content-sidebar0sidebar seperti dijelaskan dengan tutorial sebelumnya :

wp-sidebar-content-configurasion-1

Untuk tutorial ini, akan digunakan layout sidebar-content-sidebar dengan css sbb:

CSS ini kita salin ke style.css dibagian paling bawah . Hasilnya, theme WPTutorial akan tampil dengan sidebar kanan dan kiri dimana masing-masing sidebar diisi widget default dan widget kustom. Akan tetapi, theme masih terlalu lebar karena mepet ke tepi layar.

Untuk mengatur lebar theme, kita perlu menyisipkan suatu style CSS di class=”hfeed .site” karena class .site merupakan outer div dari struktur layout theme kita dengan ID=”page” . Demikian juga, dapat saja kita tentukan lebar laman melalui ID=”page”:

Hasilnya, tampilan laman layout nampak lebih masuk ke dalam , dan di kiri kanan ada padding sebesar 1.5em dengan margin 1.5em :

Pertanyaannya sekarang kenapa .site ? (lewat dulu)

Jika diinginkan lebar tetap fixed wide, .site untuk fixed widt juga dapat digunakan :

Langkah 2: Menu Navigasi

Setelah memperbaiki lebar layout, kita kemudian memperbaiki tampilan menu navigasi. Elemen utama navigasi untuk wptutorial theme adalah Menu class .main-navigation .

Style untuk menu ini perlu diperbaiki sehingga susunan menu menjadi lebih rapih. Untuk menambah padding di menu navigasi, kita sisipkan css berikut (baris 19 -23):

Hasilnya menjadi :

wptutorial-styling-4-menu

CSS diatas memberikan padding 10px pada menu navigasi utama (main-navigation). Namun tanpilan menu masih belum baik, karena menimbulkan efek turun ketika cursor diarahkan ke menu. Untuk itu kita tambahkan CSS untuk mengatur status hyperlink yaitu :

Untuk membuang efek box-shadow, maka baris 25 – 27 di hilangkan. Sedangkan untuk lebih merapatkan padding menu nilai padding horisontal 10px dikurangi menjadi 2px. Hasilnya, tampilan menu menjadi lebih rapih dengan warna coklat.

wptutorial-styling-5-menu

wptutorial-styling-6-menu

Akan tetapi menu navigasi ternyata belum sempurna, karena itu dilakukan pengaturan padding dan posisi sub-menu serta lebar dan tingginya. Setelah trial dan error akhirnya diperoleh look and feel menu navigasi sbb:

Hasilnya :

wptutorial-styling-7-menu

 

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *