Modifikasi bagian header || modif themes default

kesempatan kali ini saya akan share cara merubah tampilan header themes default, sebenarnya header themes default ini bisa kita bentuk

Dalam setiap keindahan, selalu ada mata yang memandang. Dalam setiap kebenaran, selalu ada telinga yang mendengar. Dalam setiap kasih, selalu ada hati yang menerima. Ivan Panin

kesempatan kali ini saya akan share cara merubah tampilan header themes default, sebenarnya header themes default ini bisa kita bentuk

Last Modif at July 7th, 2011

NOT RECOMEND
melanjutkan postingan sebelumnya

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 . . .

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “Modifikasi bagian header || modif themes default”

  1. wah, bingung mas.
    apa karena aku bodoh ya . . . .
    tapi ini dalam proses mengembara ilmu, makasih ya,,,, nice posts

    1. indam says:

      kita sama-sama belajar :)

Comments are closed.

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-