Tutorial 2x Sidebar block title icons - Thêm biểu tượng vào tiêu đề của block sidebar 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
Sidebar block title icons - Thêm biểu tượng vào tiêu đề của block sidebar XenForo 2

Bạn có muốn thêm các biểu tượng vào tiêu đề block sidebar như thế này không?

firefox_2019-07-08_23-10-53.png

Đây là một hướng dẫn DIY đơn giản về cách đạt được điều này.

Dưới đây bạn sẽ tìm thấy code cho các block sidebar phổ biến nhất.

Mở template Extra.less của bạn và thêm đoạn code sau:
Mã:
[data-widget-section="staffMembers"] h3.block-minorHeader:before { /* Staff online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-user-tie);
}
[data-widget-section="onlineNow"] h3.block-minorHeader:before { /* Members online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-users);
}
[data-widget-key="forum_overview_new_posts"] h3.block-minorHeader:before { /* Latest posts */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-comments);
}
[data-widget-key="xfrm_forum_overview_new_resources"] h3.block-minorHeader:before { /* Latest resources */
    display: inline-block;
    .m-faBase();
    .m-faContent(@fa-var-download);
}
[data-widget-key="forum_overview_forum_statistics"] h3.block-minorHeader:before { /* Forum statistics */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-chart-bar);
}
[data-widget-key="xfmg_media_slider"] h3.block-minorHeader:before { /* Random media */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-image);
}
[data-widget-key="forum_overview_share_page"] h3.block-minorHeader:before { /* Share this page */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-share-alt);
}

Bạn có muốn thêm một biểu tượng cho một số block sidebar khác không?

Sử dụng đoạn code sau làm ví dụ và chỉnh sửa nó một chút:
Mã:
[data-widget-key="your_widget_key"] h3.block-minorHeader:before {
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-FAiconName);
}

Chỉnh sửa widget key của bạn và thay đổi tên biểu tượng Font Awesome (bạn có thể tìm thấy chúng ở đây). Có lẽ bạn sẽ cần điều chỉnh hoặc gỡ bỏ phần padding-right.

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


Nguồn: xenforo.com​
 

nobita8x

Corporal
Tham gia
29/06/2016
Bài viết
158
Được Like
77
Bác cho em hỏi, em thêm dòng này vô

[data-widget-section="member_wrapper_newest_members"] h3.block-minorHeader:before { /* Newest members */
display: inline-block;
padding-right: 5px;
.m-faBase();
.m-faContent(@fa-fingerprint);
}

Thì tất cả các lệnh ở trên đều vô hiệu. Em sai chỗ nào nhỉ ?
hoặc thêm dòng này cũng vậy

[data-widget-section="Ghe_Tham"] h3.block-minorHeader:before { /* Ghé Thăm */
display: inline-block;
padding-right: 5px;
.m-faBase();
.m-faContent(@fa-map-marked-alt);
}
xóa đi thì mấy dòng lệnh của bác đều có hiệu lực.
bác check thử giúp em ạ.
 

thahtrung06

Moderator
Thành viên BQT
Tham gia
12/11/2019
Bài viết
1,095
Được Like
450
Bác cho em hỏi, em thêm dòng này vô

[data-widget-section="member_wrapper_newest_members"] h3.block-minorHeader:before { /* Newest members */
display: inline-block;
padding-right: 5px;
.m-faBase();
.m-faContent(@fa-fingerprint);
}

Thì tất cả các lệnh ở trên đều vô hiệu. Em sai chỗ nào nhỉ ?
hoặc thêm dòng này cũng vậy

[data-widget-section="Ghe_Tham"] h3.block-minorHeader:before { /* Ghé Thăm */
display: inline-block;
padding-right: 5px;
.m-faBase();
.m-faContent(@fa-map-marked-alt);
}
xóa đi thì mấy dòng lệnh của bác đều có hiệu lực.
bác check thử giúp em ạ.
Ko biết code widget của bạn nên không tư vấn được. Dùng data-widget-section hay data-widget-key phụ thuộc vào code widget của bạn, không phải thích dùng cái nào thì dùng nhé!
 

nobita8x

Corporal
Tham gia
29/06/2016
Bài viết
158
Được Like
77
Dùng các block có sẵn trong widget xenforo 2 mà bác, có phải tự code đâu.
Vấn đề là giữ nguyên hoặc xóa bớt code của bác thớt cho các khối thì vẫn xài bình thường. Nhưng chỉnh sửa hay thêm bất kỳ code nào như e đăng bài trên đều dẫn tới xung đột khối, ẩn hết như e nói ở trên đó bác.
 

nobita8x

Corporal
Tham gia
29/06/2016
Bài viết
158
Được Like
77
Dùng data-widget-section hay data-widget-key phụ thuộc vào code widget của bạn, không phải thích dùng cái nào thì dùng nhé!

Để em test lại lần nữa rồi bắn kq lên cho các bác.
 

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