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:

​

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

Spoiler: XF 2.3

/*** Highlight new menu item ***/
.menu-row.menu-row--separated.menu-row--clickable.is-unread {
    &:before {
        .m-faContent(@fa-var-dot-circle);
        float: right;
        color: @xf-paletteAccent2;
    }
    &:hover:before {
        .m-faContent(@fa-var-solid-dot-circle);
    }
}
/**********/

Spoiler: XF 2.2

/*** Highlight new menu item ***/
.menu-row.menu-row--separated.menu-row--clickable.is-unread {
    &: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 property color.

Để chỉnh sửa biểu tượng khi rê 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ể?

Spoiler: XF 2.3

Nếu bạn muốn một biểu tượng có một trong các kiểu Font Awesome 5 Pro - light, solid hoặc duotone - hãy sử dụng code ở trên như thế này (ví dụ): .m-faContent(@fa-var-duotone-sign-in);. Như bạn có thể thấy, bạn thêm tên kiểu (trong trường hợp đó duotone) vào bên trong code ngay sau dấu var-.

Spoiler: XF 2.2

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?

Spoiler: XF 2.3

Trong XenForo 2.3, bạn không cần phải chỉ định biểu tượng Thương hiệu. Sử dụng code như bạn làm với bất kỳ biểu tượng nào khác.

Spoiler: XF 2.2

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​

 

[PVS]

Update cho XenForo 2.3