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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 09/07/2019.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,119
    Đã được thích:
    6,623
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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​
     

Chia sẻ trang này