Chào mừng!

Bằng cách đăng ký với chúng tôi, bạn sẽ có thể thảo luận, chia sẻ và nhắn tin riêng tư với các thành viên khác trong cộng đồng của chúng tôi.

Đăng ký ngay!
  • Truy cập và ủng hộ DienDanIT.NET bằng cách click dăm 3 cái quảng cáo để duy trì sever nhé.

Tutorial [2.x] Tùy chỉnh nút ActionBar trong bài viết xenforo 2

Cua

nasscom.vn
Thành viên BQT
Việt Nam Vô Địch
Administrator
Người Điều Hành
Premium
Người Điều Hành Cấp Cao
Thành Viên VIP
Người Ảnh Hưởng
Người Đưa Tin
Người Chia Sẻ
DienDanIT 2018
Tham gia
30/10/18
Bài viết
686
Lượt Thích
2,043
VNĐ
5,772
VNĐ
5,772
Tạo nút actionbar riêng biệt dễ nhìn.
Demo
Before

After


Hướng dẫn:
  1. Mở file extra.less trên quản lý admin của bạn. Thêm code phía dưới vào đầu file.
[HIDEREPLY]
Mã:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like,
.actionBar-action--report, .actionBar-action--edit, .actionBar-action--delete,
.actionBar-action--ip, .actionBar-action--warn, .actionBar-action--history
    {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }
.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }
.actionBar-action--like:hover  {
        background: rgb(65, 158, 224);
        color: rgb(255, 255, 255);
        text-decoration: none;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
        transform: scale(1.25);
    }

@media (max-width: 800px) {
.actionBar-action--like:hover {
transform: none;
}
}
[/HIDEREPLY]

Chỉnh màu cho nút button
[HIDEREPLY]
Mã:
background: rgb(65, 158, 224);
color: rgb(255, 255, 255);
[/HIDEREPLY]
 
Top Bottom