Kustomasi yang akan kita lakukan sehubungan dengan background ini meliputi, mengganti warna background, mengganti dan menentukan posisi image background. Namun untuk postingan kali ini, saya akan membahas kustomasi warna background terlebih dahulu.
Cara Ganti Warna Background Header Blog
Jika ingin mengganti warna background pada header, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.
#header-wrapper {Catatan
background-color:#kode_html_warna;
……….
……….
}
- Untuk mendapatkan warna background pada header yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
- Penamaan stylesheet untuk #header-wrapper mungkin berbeda antara satu template dengan template yang lainnya.
Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.
#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}
#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top $startSide;
}
Nah, untuk mengganti warna background header sesuai yang kita inginkan, misalkan warna hijau lumut (#0B610B), kita harus mengganti variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.
#header-wrapper {MENGGANTI WARNA BACKGROUND PADA FOOTER
background-color:#0B610B;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}
#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-color:#0B610B;
background-repeat: repeat-x;
background-position: top $startSide;
}
Jika menginginkan warna background pada footer yang berbeda, kita harus melakukan pengeditannya pada kode css-nya seperti di bawah ini.
#footer {Catatan
background-color:#kode_html_warna;
…………
…………
}
- Untuk mendapatkan warna background pada footer yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
- Penamaan stylesheet untuk #footer mungkin berbeda antara satu template dengan template yang lainnya.
Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.
#footer {
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}
#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: transparent;
}
Nah, untuk mengganti warna background footer sesuai yang kita inginkan, misalkan warna hijau kekuningan (#BEF781), kita harus mengganti dan menambahkan variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.
#footer {
background-color:#0B610B
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}
#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: #0B610B;
}
Setelah selesai mengganti warna dengan kode html warna, kemudian simpan template dan pastikan tampilan warna background blog kita telah berubah menjadi seperti yang kita inginkan