Jumat, 18 Desember 2009

Memberi Warna Side Bar 2 kolom

Ternyata sidebar juga bisa diberi warna latar belakang. Agar tampilannya bisa seperti di blog saya ini silahkan ikuti langkah-langkah dibawah ini (khusus untuk template minima yang baru):
1.Sisipkan kode berikut diantara kode variable :
<Variable name="sidebarbgcolor" description="Warna background sidebar"
type="color" default="#999" value="#e6e6e6">


2.Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna cokelat adalah kode yang harus di tambahkan.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
background:$sidebarbgcolor; /* ini kode tambahannya */
padding: 7px; /* ini kode tambahannya */

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Jika penambahan kode sudah selesai, jangan lupa untuk menekan tombol Simpan Template. Apabila kolom sidebarnya ada dua langkahnya sama saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.

Tidak ada komentar:

Posting Komentar