Trick & Customize Head Shot, Small Head Shot

Tutorial untuk seting Head-Shot. Kali ini Head Shot (HS) akan kita kecilkan, dan informasi tentang User Name, status On Line dan alamat berjajar di sebelah gambar HS, Bukan di bawah HS.

Ide ini datang dari pertanyaan di Notes TrickMP. Ternyata ada juga users yang menginginkan HS menjadi kecil.
Kode yang akan saya jelaskan di sini tidak menjiplak atau mengkopi dari site manapun.
Dan agar tidak dituduh menjiplak, maka sengaja display User Logo saya buat lain. Tidak seperti contoh yang dipasang di Notes tersebut.

Agar Rail anda dapat memuat HS ini, silahkan sesuaikan lebar rail anda.
Tutorial dapat anda baca di Customize Wide Rail

Kita mulai.

Default display User Logo by ANDROS base theme.



Pertama, kita buat Head Shot image menjadi lebar 50px dan tinggi 50px.

td.rail div#rail div.userlogo img {
height:50px;
width:50px;
}


Berikut nya, kita sesuaikan juga lebar User Logo menjadi 50px.

td.rail div#rail div.userlogo, td.rail div#rail div.userlogo a {
width:50px;
}


Hampir berhasil. Tetapi belum sesuai keinginan. Kita geser block "User Logo" ke tepi kiri.

td.rail div#rail div.userlogo {
float:left;
margin:0 8px 8px 0;
padding:5px;
}


Nah, sekarang giliran text User Name, status On Line dan Alamat kita customize agar dapat masuk ke sebelah gambar HS.

div.railbody h4 {
font-size:11px;
margin-bottom:4px;
margin-top:0;
}
div.railbody p {
font-size:11px;
margin:4px 0;
}
div.railbody p b {
color:white;
font-size:12px;
}


Terakhir, kita geser seluruh nya ke atas.

.railbody {
margin-top:-129px;
}


Mudah bukan ?
Agar sesuai dengan theme anda, anda perlu sedikit penyesuaian. Terutama pada value dari masing-masing properti. Silahkan melakukan eksperimen.
Sampai saat ini, pengalaman masih berstatus sebagai guru terbaik.

Kode lengkap :

/* Customize HS : Small HS --- */
/* ©MMIX http://dangdutkoplo.multiply.com */
td.rail div#rail div.userlogo img {
height:50px;
width:50px;
}
td.rail div#rail div.userlogo, td.rail div#rail div.userlogo a {
width:50px;
}
td.rail div#rail div.userlogo {
float:left;
margin:0 8px 8px 0;
padding:5px;
}
div.railbody h4 {
font-size:11px;
margin-bottom:4px;
margin-top:0;
}
div.railbody p {
font-size:11px;
margin:4px 0;
}
div.railbody p b {
color:white;
font-size:12px;
}
.railbody {
margin-top:-129px;
}

Hope can helps.
© 2009 Lilok http://dangdutkoplo.multiply.com