Ganti Warna Sidebar Minima

Adakah diantara sobat pecinta template minima? jawabannya kemungkinan banyak, diantaranya adalah sobat junyan. Di balik kecintaannya terhadap template minima, ada sedikit keinginan yang masih belum bisa di lakukan yaitu mengubah warna kolom sidebar agar tidak sama dengan warna kolom posting. Memang jika sobat merujuk kepada kode asli dari template tersebut, walhasil tidak akan bisa membuat keduanya berbeda warna karena memang di desain untuk satu warna. Apabila sobat ingin merubahnya tentu saja itu bisa di lakukan dan saya kira tidaklah terlalu sulit untuk melakukannya.

Karena saat ini template minima masih terbagi dua yaitu minima klasik dan minima baru maka akan saya coba bahas satu persatu. Sebai catatan yaitu template yang di gunakan adalah template minima berwarna putih.

Minima Klasik

Untuk merubah warna kolom sidebar minima, silahkan cari kode seperti di bawah ini :

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
}


Agar warna sidebar bisa berubah warna, sobat tinggal menyisipkan kode warna yang di inginkan, contoh warna krem :

background:#f5ede3;

Agar tulisan yang ada di sidebar tidak terlihat menabrak dinding sidebar, sobat bisa memberi sedikit sentuhan dengan menambahkan kode padding, misal :

padding : 7px;

Maka apabila kode-kode diatas di sisipkan pada kode kolom sidebar, maka kodenya akan jadi seperti ini :

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
background:#f5ede3; /*ini kode tambahannya */
padding:7px;/*ini kode tambahannya */
}
}


Sangat mudah bukan? tidak terlalu banyak kode yang harus di tambahkan. Bagaimana apabila kolom posting ingin di beri warna juga? sobat hanya tinggal menyisipkan kode warna diantara kode posting, yaitu bagian #main;

#main {
width:410px;
float:left;
background:#f5ede3; /* ini kode tambahannya */
padding:7px;/* ini kode tambahannya */
}

Minima baru

Untuk template baru, ada sedikit perbedaan dalam hal pewarnaan yaitu memakai variable warna. Dengan adanya variable warna maka si pemakai template dapat mengubah warna secara praktis di bagian menu Font dan Warna. Contoh variable warna dari template minima seperti ini :

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

Tugas dari sobat adalah membuat variable baru, terserah namanya apa, akan tetapi di sarankan untuk membuat nama variable dengan yang mudah di ingat. Masih bingung? silahkan ikuti langkah berikut ini:

Sisipkan kode berikut diantara kode variable :

<Variable name="sidebarbgcolor" description="Warna background sidebar"
type="color" default="#999" value="#e6e6e6">

Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna merah 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. Bagaimana jika kolom posting juga ingin berwarna? seperti yang tadi juga, silahkan buat variable warna dan sisipkan kode diantara kode kolom posting. Trus bagaimana apabila kolom sidebarnya ada dua? sama saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.

Sedikit tambahan, sebenarnya untuk variable warna bisa juga tidak usah dibuat. Caranya sobat langsung menuliskan kode warnanya pada kode sidebar, contoh :

/* 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:#e6e6e6; /* 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 */
}

Akan tetapi apabila kode warna langsung di pasang seperti itu maka pada menu Font dan Warna, warna tersebut tidak bisa di ubah-ubah.

mau melihat contoh sidebar minima yang punya warna berbeda, silahkan klik di sini !

selamat mencoba !

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, kang Rohman rekomendasikan anda belajar di sini   «« sok atuh di klik biar situsnya keluar

Jika anda merasa artikel ini bermanfaat, silahkan lakukan vote ke Lintas Berita agar artikel ini bisa di baca oleh orang lain.

Berlangganan via RSS Feed

Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.

Privacy guaranteed. We'll never share your info.

Posting lain yang mungkin ingin anda baca :