ShineGhost
23-02-14, 08:02 AM
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:
<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>)
Đầ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;} ::-webkit-scrollbar-track-piece { background-color: #ffffff;} ::-webkit-scrollbar-thumb { height: 50px; background-color: #0000ff; border-radius: 3px;} ::-webkit-scrollbar-corner { background-color: #999;}} ::-webkit-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;} ::-webkit-scrollbar-track-piece { background-color: #ffffff;} ::-webkit-scrollbar-thumb { height: 50px; background-color: #0000ff; } ::-webkit-scrollbar-corner { background-color: #999;}} ::-webkit-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:
::-webkit-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; } ::-webkit-scrollbar-track { background-color: #999;} ::-webkit-scrollbar-track-piece { background-color: #ffffff;} ::-webkit-scrollbar-thumb { height: 50px; background-color: #0000ff; } ::-webkit-scrollbar-corner { background-color: #999;}} ::-webkit-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
<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>)
( ở đây mình dùng kiểu 2 trong 3 kiểu mà mình đã demo ảnh ở dưới )
Demo ảnh:
<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>)
Đầ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;} ::-webkit-scrollbar-track-piece { background-color: #ffffff;} ::-webkit-scrollbar-thumb { height: 50px; background-color: #0000ff; border-radius: 3px;} ::-webkit-scrollbar-corner { background-color: #999;}} ::-webkit-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;} ::-webkit-scrollbar-track-piece { background-color: #ffffff;} ::-webkit-scrollbar-thumb { height: 50px; background-color: #0000ff; } ::-webkit-scrollbar-corner { background-color: #999;}} ::-webkit-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:
::-webkit-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; } ::-webkit-scrollbar-track { background-color: #999;} ::-webkit-scrollbar-track-piece { background-color: #ffffff;} ::-webkit-scrollbar-thumb { height: 50px; background-color: #0000ff; } ::-webkit-scrollbar-corner { background-color: #999;}} ::-webkit-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
<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>)