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

[PVS]

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:

​

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ã:

/*** 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​