Trên chrome đã nhé, trên các trình duyệt khác thì mình chưa check

( ở đây mình dùng kiểu 2 trong 3 kiểu mà mình đã demo ảnh ở dưới )

Demo ảnh:

[Only registered and activated users can see links. ]


Đầu tiên là với kiểu 1

Vào admincp -> search in template -> additional.css
thêm vào cuối cùng:
Kiểu 1:

PHP Code:
::-webkit-scrollbar { width: 8px; height: 3px;} ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-track { background-color: #999;} :ebkit-scrollbar-track-piece { background-color: #ffffff;} :ebkit-scrollbar-thumb { height: 50px; background-color: #0000ff; border-radius: 3px;} :ebkit-scrollbar-corner { background-color: #999;}} :ebkit-resizer { background-color: #666;}

Kiểu này thì cái viền dưới sẽ đc bo hơi vòm vào 1 tí, vì skin là skin dạng metro nhái theo win 8 nên mình thích nó bằng phẳng hơn, vì thế mình ko bo tròn nữa, xóa cái đoạn
Code:

border-radius: 3px;
ở trong webkit-scrollbar-thumb đi là đc, màu của thanh cuộn các bạn cũng có thể thay đổi ở dòng này

Như vậy code kiểu 2 của chúng ta là
Kiểu 2:

PHP Code:
::-webkit-scrollbar { width: 8px; height: 3px;} ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-track { background-color: #999;} :ebkit-scrollbar-track-piece { background-color: #ffffff;} :ebkit-scrollbar-thumb { height: 50px; background-color: #0000ff; } :ebkit-scrollbar-corner { background-color: #999;}} :ebkit-resizer { background-color: #666;}
Các bạn để ý phần nút bấm lên và xuống mình đã ẩn đi, kiểu 3 cho các bạn nào muốn hiện 2 nút này ( cả ngang dọc khi co màn hình nữa là 4 nút )

thay phần
Code:

:ebkit-scrollbar-button { width: 0px; height: 0px; }
xóa các phần chiều dài và chiều rộng đi và thay bằng mã màu cho cái nút ấy chẳng hạn, ta có kiểu 3

Kiểu 3:


PHP Code:
::-webkit-scrollbar { width: 8px; height: 3px;} ::-webkit-scrollbar-button { background-color: #0000ff; } :ebkit-scrollbar-track { background-color: #999;} :ebkit-scrollbar-track-piece { background-color: #ffffff;} :ebkit-scrollbar-thumb { height: 50px; background-color: #0000ff; } :ebkit-scrollbar-corner { background-color: #999;}} :ebkit-resizer { background-color: #666;}

Sau đây là chi tiết các thành phần mà chúng ta vừa chỉnh sửa cho các bạn muốn tùy biến 1 kiểu nào đó khác

[Only registered and activated users can see links. ]