t u t o r i a l s i t e

Tutorial: Customize Scrollbar

Saturday, June 18, 2011 - 0 comment

Annyeong. Harini yad nak show macammana nak cantikkan Scrollbar. If taktahu Scrollbar tu apa, tengok dekat bawah tu. Tutorial ini hanya untuk Google Chrome shj. Sorry. Yad akan tunjukkan dua cara.

Contoh scrollbar

1 Pergi Dashboard - Design - Template Designer - Add CSS

2 Pastekan code dibawah dalam box CSS tu.

::-webkit-scrollbar {height:12px;width: 12px;background: #D9D9D9;}::-webkit-scrollbar-thumb {background-color: #B2C0C6;-moz-border-radius: 10px;border-radius: 10px;}

Hijau tu untuk tukar warna bar tu
Merah pula untuk tukar background scrollbar tu.

Kalau nak taknak warna? Nak bar dia ada image lawa lawa colourfull gitu? -.- Cerewet betol. Jkjk
Korunk guna function CTRL + F then search code ni background-color: #B2C0C6; then tukarkan code tu dengan code dekat bawah ni

background-image:url(URL gambar);

Cara kedua

1 Pergi Dashboard - Design - EditHTML

2 CTRL + F dan cari code ]]></b:skin>

3 Pastekan code dibawah ini, sebelum code yang tadi.

::-webkit-scrollbar {
height:12px;
width: 12px;
background-color: #ffffff;
}
::-webkit-scrollbar-thumb {
background-color: #ffcccc;
-moz-border-radius: 10px;
border-radius: 10px;
}

Pink: background colour
Purple: scrollbar colour

4 - Preview, if puas hati so dah boleh save.

Labels: Tutorial