Modifikasi bagian header || modif themes default

NOT RECOMEND
melanjutkan postingan sebelumnya

• cara menambah pavicon | modif theme default
• menampilkan sidebar di single post| modif theme dafault
• merubah ukuran badan post dan sidebar | modif theme default

kesempatan kali ini saya akan share cara merubah tampilan header themes default, sebenarnya header themes default ini bisa kita bentuk sedemikian rupa, misal dijadikan 2, 3 kolom, tambain slide-show serta beberapa bentuk lainya!
namun untuk kali ini saya ngga bisa share banyak, jadi yang dimodif bentuknya saja ya!

berikut cara merubah bentuk tampilan header || default themes

• masuk ke ….wp-content/themes/default
• edit style.css
• cari style seperti berikut kemudian hapus semua!

#header {
background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
}

#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 200px;
width: 758px;
}

#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px;
}

#headerimg {
margin: 0;
height: 200px;
width: 100%;
}

h1 {
font-size: 4em;
text-align: center;
}

h1 {
padding-top: 70px;
margin: 0;
}

#headerimg .description {
font-size: 1.2em;
text-align: center;
}

• pastikan semua style diatas sudah di hapus!
• nah, karena style tadi kita hapus sekarang kita akan mengganti style yang kita hapus tadi

masukan style berikut kedalam style.css

/*start ditambahkan untuk style pada header*/
#header {
clear:both;
background-color:#E0FFFF;/*warna background atau latar belakang*/
margin: 0;
padding:0;
height: 200px; /* tinggi */
width: 100%;/* lebar */
border:1px solid #9AFEFF; /* lebar border 1px, style solid, warna #9AFEFF */
-moz-border-radius-topright:20px;/*style hanya untuk firefox css3nya border-radius*/
-moz-border-radius-topleft:20px;/*style hanya untuk firefox css3nya border-radius*/
}
#headerimg {
margin:0;
height: 100%;
width: auto;
}
#headerimg .description {
padding-top:10px;/* jarak atas deskripsi blog */
padding-left:30px; /* jarak dari kiri deskripsi */
font-size: 30px;/* ukuran font deskripsi */
text-align: left;/* align kiri, dapat di ubah, ke center maupun right, namun sesuaikan padding left dan rightnya funsinya untuk mengatur posisi */
}
#headerimg h1 {
font-size:50px;/* ukuran font title*/
text-align: left; /* align kiri, dapat di ubah, ke center maupun right, namun sesuaikan padding left dan rightnya fungsinya untuk mengatur posisi*/
padding-top: 30px;/* jarak atas title */
padding-left: 30px;/* jarak dari kiri kiri title blog */
margin: 0;
}
/*end ditambahkan untuk style header**********************/

• simpan

keterangan pada style

• warna merah adalah value atau nilai dapat disesuaikan dengan keinginan, fungsinya untuk mengubah tampilan

• warna biru adalah komentar css, abaikan saja

untuk mengganti warna judul dan deskripsinya cari ini

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: white;
}

kemudian ganti color:white; dengan warna lain!
bersambung . . .