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!
  • Diễn Đàn VuiCode tạm thời chuyển xang tên miền mới là DienDanIT.NET. Bạn hãy truy cập bằng tên miền mới nhé!

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

Cua

VUTIENANH.COM
Thành viên BQT
Administrator
Thành Viên VIP
DienDanIT 2018
Tham gia
30/10/18
Bài viết
662
Lượt Thích
1,872
VNĐ
972
VNĐ
972
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