Tutorial 2x Highlight new menu item - Làm nổi bật item menu mới cho XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Highlight new menu item - Làm nổi bật item menu mới cho XenForo 2

Hướng dẫn này sẽ đạt được điều sau:

2019-04-18_20-40-55.gif

Lưu ý: Chỉ tương thích với XenForo 2.1 trở lên.

Như bạn có thể thấy, bạn có thể nhận được một biểu tượng chỉ thay đổi khi di chuột lên các item mới với mục đích là làm nổi bật chúng thêm một chút.

Mở template extra.less và thêm mã:
Mã:
/*** Highlight new menu item ***/
.menu-row.menu-row--separated.menu-row--clickable.menu-row--highlighted {
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-dot-circle);
        float: right;
        color: @xf-paletteAccent2;
    }
    &:hover:before {
        .m-faBase('Pro', @faWeight-solid);
        .m-faContent(@fa-var-dot-circle);
    }
}
/**********/


Để chỉnh sửa biểu tượng hãy để ý class &:before. Để thay đổi biểu tượng Font Awesome hãy sửa dot-circle (trong ví dụ trên) thành tên biểu tượng khác bất kỳ.

Để thay đổi màu sắc biểu tượng thì sửa color property hoặc sửa trực tiếp trong code.

Để chỉnh sửa biểu tượng khi de chuột vào thì sửa tại class &:hover:before.

Bạn muốn sử dụng biểu tượng Pro của một style cụ thể?
Chỉnh sửa .m-faBase(); và thay đổi thành .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); hoặc .m-faBase('Pro', @faWeight-light);.

Bạn muốn sử dụng biểu tượng thương hiệu?
Chỉnh sửa .m-faBase(); và thay đổi thành .m-faBase('Brands');.

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


Nguồn: xenforo.com​
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom