Tutorial 2x Hover Effect for actionBar - Hiệu ứng Hover cho actionBar XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,659
Được Like
10,921
Hover Effect for actionBar - Hiệu ứng Hover cho actionBar XenForo 2

Hướng dẫn này sẽ thêm hiệu ứng hover cho actionBar trên XenForo 2.

Đơn giản chỉ cần thêm đoạn code sau vào Extra.less:
Mã:
//Action Bar
.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
   
        &:hover {
            font-size: 100%;
            text-decoration:none;
            color: @xf-paletteColor3;
        }
        &:before {
            font-size: 15px;
            margin-left: 2px;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            margin-right: 5px;
        }
        &--inlineMod {
            font-size: 100%;
        }
        &--menuTrigger {
            font-size: 100%;
        }
        &--report:before {
            content: "\f071";
        }
        &--edit:before {
            content: "\f040";
        }
        &--delete:before {
            content: "\f00d";
        }
        &--ip:before {
            content: "\f002";
        }
        &--like:before {
            content: "\f087";
        }
        &--warn:before {
            content: "\f12a";
        }
        &--history:before {
            content: "\f1da";
        }
        &--reaction i {
            display: none;
        }
        &--reaction:before {
            content: "\f164";
        }
        &--spam:before {
            content: "\f024";
        }
            @media(max-width:910px) {
            &:hover {
            font-size: 0;
            text-decoration:none;
            color: @xf-paletteColor3;
            }
        }
    }
}

Lưu lại là xong.

Screenshot_1.png

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

dinhhai

Thượng Đế
Tham gia
28/07/2015
Bài viết
400
Được Like
198
Có bản cập nhật mới sửa lỗi hiển thị cảm xúc, bác @PVS cập nhật giúp với nha
Mình không xem được đầy đủ nội dung
Cảm ơn bác

xenforo.com/community/resources/hover-effect-for-actionbar.7776/updates#resource-update-34977
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom