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

PVS

Generalissimo
Thành viên BQT
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

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