Cara Mengubah dan Mengatur Lebar Template BroSense

deniverdana.com - Mungkin diantara kalian ada yang menggunakan template BroSense sampai saat ini, tapi masih ada yang kurang cocok dengan lebar keseluruhan template, jika iya berarti sama seperti masalah yang saya alami. Saya suka dengan template BroSense ini karena tampilannya simpel dan responsive.

Tapi ya itu, banyak yang kurang cocok dengan ukuran sidebar template karena memiliki lebar 160px sehingga memiliki keterbatasaan untuk menempatkan widget tertentu. Sebenarnya saya juga belum begitu paham mengenai kode HTML dan CSS sehingga awalnya agak kesulitan untuk mengubah ukuran sidebar atau keseluruhan template.

Setelah sekian lama berkutat dengan kode-kode yang membingungkan bagi saya, akhirnya dengan bantuan Inspect Element sedikit terbantu sekedar untuk melihat kode mana yang harus diubah. Berikut cara mengubah dan mengatur lebar template BroSense. Pada konteks ini misal saya ingin mengubah lebar sidebar template yang tadinya 160px menjadi 300px.

1. Mengubah lebar keseluruhan template
Cari kode #wrapper { gunakan CTRL+F untuk memudahkan pencarian, kalau sudah nanti akan ada kode seperti dibawah ini:
/* WRAPPER */
#wrapper {
    background:$(wrapper.background.color);
    max-width:764px;
    margin:0 auto;
    padding:0;
    box-shadow:0px 0px 5px rgba(30, 30, 30, 0.08);
}
Lalu ubah ukuran max-width menjadi 950px

2. Mengubah lebar menu navigasi template
Cari kode #nav { kalau sudah ketemu nanti akan ada kode seperti dibawah ini:
/* MENU NAVIGATION */
#nav {
    font:$(navigation.menu.font);
    background:$(menu.background.color);
    border-top: 3px solid $(menu.border.top.color);
    border-bottom:3px solid $(menu.border.bottom.color);
    margin:0 auto;
    padding:0 0;
    text-transform:uppercase;
    display:inline-block;
    max-width:764px;
    width:100%;
}
Sama seperti yang pertama, ubah ukuran max-width menjadi 950px

3. Mengubah lebar post template
Cari kode #post-wrapper { kalau sudah ketemu nanti akan ada kode seperti dibawah ini:
/* POST WRAPPER */
#post-wrapper {
    float:left;
    width:100%;
    margin:12px -160px 12px 0
}
.post-container {
    margin:0 172px 0 0;
    max-width:100%;
}
Ubah ukuran margin #post-wrapper { menjadi -300px dan .post-container { menjadi 312px

Nah, jika sudah mengikuti cara diatas mungkin kalian sudah paham atau jika masih ada yang kurang kalian bisa menambahkan kode-kode tertentu untuk mempercantik tampilan, misal ingin menambahkan border atau mengubah background warna hingga sesuai dengan apa yang kalian harapkan. Selamat mencoba.