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

[PVS]

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?

​

Đâ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:

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

[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]

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 ạ.

BuddyUp Việt Nam

BuddyUp Việt Nam

buddyupvietnam.com

 

[thahtrung06]

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 ạ.

BuddyUp Việt Nam

BuddyUp Việt Nam

buddyupvietnam.com

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]

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]

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.