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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,639
Được Like
12,671
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 xem hướng dẫn này.
  • 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, xem hướng dẫn này.
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:
Rich (BB code):
/* 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;

    }

}

/**********/

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:
Rich (BB code):
/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node--read .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon:before {
        color: #e6cbe4;
        text-shadow: none;
    }
    /* unread icon */
    .node--forum.node--unread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread .subNodeLink-icon:before {
        color: #9e5697;
        text-shadow: none;
    }
}
/**********/

Rich (BB code):
/* 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:
Rich (BB code):
/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon: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 .subNodeLink-icon:before, .node--category.node--unread .node-icon i:before {
        color: #9e5697;
        text-shadow: none;
    }
}
/**********/

Rich (BB code):
/* 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:
Rich (BB code):
/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon: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 .subNodeLink-icon:before, .node--category.node--unread .node-icon i:before {
        color: #9e5697;
        text-shadow: none;
    }
}
/**********/

Rich (BB code):
/* 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:
Rich (BB code):
/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon: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 .subNodeLink-icon:before, .node--category.node--unread .node-icon i:before {
        color: #9e5697;
        text-shadow: none;
    }
}
/**********/

Rich (BB code):
/* 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​
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,639
Được Like
12,671
Update cho XF 2.2.2
 

Top Bottom