SwisPress adalah Wordpress (Twentyten) child theme yang dirilis oleh WPCharity¹. Ketika melihat SwissPress, saya langsung menyukainya. Simpel, proporsional dan swiss style². FYI, SwissPress lahir dari kolaborasi Daustralala³ dan Pakzam⁴.

Suatu kali saya mencoba SwissPress. Saya menjumpai sedikit masalah di bagian header. Bukan masalah besar yang berdampak pada usabilitas atau aksesibilitas, hanya masalah layout yang bergeser karena kondisi tertentu.

1. Ketika List Menu Cukup Banyak

Ketika kita menggunakan list menu yang cukup banyak, kita mendapati tampilan list menu menjadi dua baris — karena lebar yang tidak mencukupi. Hal ini menyebabkan teks logo tertekan ke bawah/melorot sehingga menempel pada border. Untuk lebih jelasnya dapat dilihat pada gambar 1.

Hal tersebut terjadi karena tinggi div#header dipaten sebesar 120px. Untuk mengatasinya saya mengubah sedikit CSS seperti berikut:

/*-- CSS sebelumnya--*/
#header{
        padding: 0px;
        border-bottom: 4px solid #ddd;
        height: 120px;
}
/*-- CSS dimodifikasi --*/
#header{
        padding: 0px;
        border-bottom: 4px solid #ddd;
        padding-bottom:16px;
}

Untuk mengatasi float element, saya tambahkan clearfix menggunakan pseudo-element. Perlu dicatat bahwa cara ini tidak berlaku bagi IE7 ke bawah karena belum tidak mendukung pseudo-element.

#header:after {
        content:"";
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
}

2. Ketika Teks Logo Terlalu Panjang

Saya juga mencoba testing dengan menggunakan teks panjang sebagai logo. Hasilnya adalah teks deskripsi menjadi melorot menekan garis batas bawah, sehingga garis pembatas — yang seharusnya dobel — menjadi terpisah. Untuk lebih jelasnya dapat dilihat pada gambar 2.

Permasalahan tersebut disebabkan karena lebar teks logo didefinisikan otomatis, sehingga ketika terlalu panjang akan mengacaukan susunan grid. Untuk mengatasinya, saya menambahkan definisi lebar menjadi 450px.

/*-- CSS Sebelumnya --*/ 
#site-title{
	display: inline-block;
	width: auto;
	margin: 40px 100px 0 0;
}
/*-- CSS Dimodifikasi --*/
#site-title{
	display: inline-block;
	width: auto;
	margin: 40px 100px 0 0;
	max-width:450px;
}

Simpulan

Saya hanya kebetulan saja mengetahui masalah layout pada header SwissPress — kemudian menuliskannya disini. Selain pada bagian header, saya tidak/belum menjumpai masalah terkait desain antarmuka. SwissPress adalah theme yang bagus. Jika anda membutuhkan theme untuk blogging yang simpel, minimalis, dan berkarakter, saya merekomendasikan SwissPress.

Bagi yang menginginkan CSS SwissPress yang telah saya modifikasi, dapat melihat kodenya di https://gist.github.com/1062110.

¹ SwissPress — WPCharity.com.

² Desain Komunikasi Visual — Swiss — Wikipedia.com.

³ firmanfirdaus.com.

⁴ zam.web.id.

Comments

powered by Disqus