Tutorial 2x Coloured Node Icons - Thay đổi màu sắc biểu tượng Node cho XenForo 2

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 13/03/2018.

  • Google checker:
  1. PVS

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

    Tham gia:
    28/02/2015
    Bài viết:
    8,965
    Đã được thích:
    6,127
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    Coloured Node Icons - Thay đổi màu sắc biểu tượng Node cho XenForo 2

    Demo:

    cni-main.png
    Trước khi thay đổi code cần chuẩn bị:
    • Để thay đổi category block header Hãy đăng nhập hoặc đăng ký để xem được links.
    • Hãy chắc chắn loại node là gì để thay đổi biểu tượng phù hợp (Category, Forum, Link forum hoặc Page).
    • Nếu bạn không biết cách để check ID node, Hãy đăng nhập hoặc đăng ký để xem được links.
    Thay đổi màu sắc của biểu tượng node loại Forum

    Đối với biểu tượng node loại Forum (read và unread) hãy thêm code này vào template extra.less của bạn:
    Mã:
    /* Coloured Node Icons */
    .block.block--category.block--categoryX {
        /* read icon */
        .node--forum.node--read .node-icon i:before {
            color: #e6cbe4;
            text-shadow: none;
        }
        /* unread icon */
        .node--forum.node--unread .node-icon i:before {
            color: #9e5697;
            text-shadow: none;
        }
    }
    /**********/
    Lưu ý categoryX, bạn thay X bằng ID của node.

    Kết quả cho biểu tượng read và unread:

    cni-read.png cni-unread.png
    Để thay đổi màu sắc của biểu tượng subforum thì chỉ cần chỉnh sửa code ở trên như sau:
    Mã:
    /* Coloured Node Icons */
    .block.block--category.block--categoryX {
        /* read icon */
        .node--forum.node--read .node-icon i:before, .subNodeLink.subNodeLink--forum:before {
            color: #e6cbe4;
            text-shadow: none;
        }
        /* unread icon */
        .node--forum.node--unread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before {
            color: #9e5697;
            text-shadow: none;
        }
    }
    /**********/
    Kết quả cho biểu tượng subforum:

    cni-subforum.png
    Thay đổi biểu tượng node loại Category

    Xem các bước ở trên và chỉnh sửa code cho phù hợp với nhu cầu của bạn. Bạn có thể chỉ cần thêm .node--category.node--read .node-icon i:before cho biểu tượng read trên code hoặc check code dưới đây để hiểu rõ hơn:
    Mã:
    /* Coloured Node Icons */
    .block.block--category.block--categoryX {
        /* read icon */
        .node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
        .node--category.node--read .node-icon i:before {
            color: #e6cbe4;
            text-shadow: none;
        }
        /* unread icon */
        .node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
            color: #9e5697;
            text-shadow: none;
        }
    }
    /**********/
    Thay đổi biểu tượng node loại Link forum

    Xem các bước ở trên và chỉnh sửa code cho phù hợp với nhu cầu của bạn. Bạn có thể chỉ cần thêm .node--link .node-icon i:before cho biểu tượng read trên code hoặc check code dưới đây để hiểu rõ hơn:
    Mã:
    /* Coloured Node Icons */
    .block.block--category.block--categoryX {
        /* read icon */
        .node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
        .node--category.node--read .node-icon i:before, .node--link .node-icon i:before {
            color: #e6cbe4;
            text-shadow: none;
        }
        /* unread icon */
        .node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
            color: #9e5697;
            text-shadow: none;
        }
    }
    /**********/
    Thay đổi biểu tượng node loại Page

    Xem các bước ở trên và chỉnh sửa code cho phù hợp với nhu cầu của bạn. Bạn có thể chỉ cần thêm .node--page .node-icon i:before cho biểu tượng read trên code hoặc check code dưới đây để hiểu rõ hơn:
    Mã:
    /* Coloured Node Icons */
    .block.block--category.block--categoryX {
        /* read icon */
        .node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
        .node--category.node--read .node-icon i:before, .node--link .node-icon i:before, .node--page .node-icon i:before {
            color: #e6cbe4;
            text-shadow: none;
        }
        /* unread icon */
        .node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
            color: #9e5697;
            text-shadow: none;
        }
    }
    /**********/
    Chúc các bạn thành công.


    Nguồn: xenforo.com​
     

Chia sẻ trang này

Đang tải...