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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,862
Được Like
9,944
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

Thượng Đế
Tham gia
29/06/2016
Bài viết
151
Được Like
72
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

Thượng Đế
Tham gia
12/11/2019
Bài viết
788
Được Like
337
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

Thượng Đế
Tham gia
29/06/2016
Bài viết
151
Được Like
72
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

Thượng Đế
Tham gia
29/06/2016
Bài viết
151
Được Like
72
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

Hosting Giá rẻ

hosting free
hosting free
Top Bottom