Megubah Warna Backgroun

Bagi sobat t'Net yag ingin mengubah warna dari background blognya cukup mudah, itu bukan pekerjaan yang sulit. Kita akan bermain dengan jode HTML untuk mengubhnya.
Sekarang kita akan belajar mengbahnya.

MENGGANTI WARNA BACKGROUND

Untuk mengganti warna Backgroun kita akan melakukan pengeditan kode css yang biasa formatnya seperti di bawah ini

body {
background-color:#kode_html_warna;
..............
...............
} 

Catatan

• Untuk mendapatkan background dengan warna yang kita inginkan, kita dapat mengganti kode kode_html_warna dengan kode html warna yang lain.
• Pada contoh kasus ini, kita akan menemukan kode css untuk background, seperti di bawah ini.

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;
}

Nah, untuk mengganti warna background sesuai yang keinginan, misalkan warna hitam (#00000), kita dapat mengganti variable “background” di atas dengan kode “background:#00000” sehingga menjadi seperti di bawah ini.

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #00000;
font-size: small;
} 

MENGGANTI WARNA BACKGROUND PADA SIDEBAR

 Jika menginginkan warna background yang berbeda pada sidebar, kita harus melakukan pengeditan pada kode css seperti di bawah ini.

#sidebar {
background-color:#kode_html_warna;
...............

..............
}

Catatan

• Untuk mendapatkan warna background sidebar yang keinginan, kita dapat mengganti kode_html_warna tersebut dengan kode_html_warna yang lain.
• Penamaan stylesheet untuk #sidebar mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #sidebar-wrapper, #side-wrap, #side-wrap1, side-wrap2.

Contoh salah satu kasus yang kita temukan, kita akan menemukan kode css-dengan format seperti ini.

#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}

Nah, untuk mengganti warna background sidebar sesuai yang keinginkn, misalkan warna hijau muda (#81F781), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#81F781” sehingga menjadi seperti di bawah ini.

#sidebar {
background-color:#81F781;
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}

MENGGANTI WARNA BACKGROUND PADA HALAMAN POSTING

Jika menginginkan warna background yang berbeda pada halaman posting, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini. 

#main {
background-color:#kode_html_warna;
.............

............
} 

Catatan

• Untuk mendapatkan warna background pada halaman posting yang sesuai keinginan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain.
• Penamaan stylesheet untuk #main mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #main-wrapper.

sebaia contoh, kita akan menemukan kode css dengan format seperti ini.

#main {
width: 400px;
float: $startSide;
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 */
}
Nah, untuk mengganti warna background halaman posting sesuai keinginan, misalkan warna kuning (#F2F5A9), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#F2F5A9” sehingga menjadi seperti di bawah ini.

#main {
background-color:#F2F5A9;
width: 400px;
float: $startSide;
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 */
} 

MENGGANTI WARNA BACKGROUND PADA HEADER 

Jika ingin mengganti warna background pada header, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini. 

#header-wrapper {
background-color:#kode_html_warna;
..............
..............
}

Catatan

• Untuk mendapatkan warna background pada header yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain.
• Penamaan stylesheet untuk #header-wrapper mungkin berbeda antara satu template dengan template yang lainnya.

Sebagai contoh, 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 keinginan, 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 {
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;
} 

MENGGANTI WARNA BACKGROUND PADA FOOTER 

Jika menginginkan warna background pada footer yang berbeda, kita harus melakukan pengeditannya pada kode css-nya seperti di bawah ini.

#footer {
background-color:#kode_html_warna;
................

...............
}

Catatan

• Untuk mendapatkan warna background pada footer yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain.
• Penamaan stylesheet untuk #footer mungkin berbeda antara satu template dengan template yang lainnya. 

Sebagai contoh, 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.