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

[PVS]

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

Demo:

​

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:

Spoiler: XF 2.3

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node--read .node-icon i {
        color: #e6cbe4;
    }
    /* unread icon */
    .node--forum.node--unread .node-icon i {
        color: #9e5697;
    }
}
/**********/

Spoiler: XF 2.2

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node--read .node-icon i:before {
        color: #e6cbe4;
    }
    /* unread icon */
    .node--forum.node--unread .node-icon i:before {
        color: #9e5697;
    }
}
/**********/

Thay X bằng ID của node.

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

​

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

Spoiler: XF 2.3

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node--read .node-icon i, .subNodeLink.subNodeLink--forum .subNodeLink-icon {
        color: #e6cbe4;
    }
    /* unread icon */
    .node--forum.node--unread .node-icon i, .subNodeLink.subNodeLink--forum.subNodeLink--unread .subNodeLink-icon {
        color: #9e5697;
    }
}
/**********/

Spoiler: XF 2.2.2 hoặc cao hơn

/* 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;
    }
}
/**********/

Spoiler: XF 2.2.1 hoặc thấp hơn

/* 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:

​

Thay đổi biểu tượng node loại Category

Spoiler: XF 2.3

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 cho biểu tượng read trên code hoặc check code dưới đây để hiểu rõ hơn:

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node-- read .node-icon i, .subNodeLink.subNodeLink--forum .subNodeLink-icon,
    .node--category.node--read .node-icon i {
        color: #e6cbe4;
    }
    /* unread icon */
    .node--forum.node-- unread .node-icon i, .subNodeLink.subNodeLink--forum.subNodeLink--unread .subNodeLink-icon, .node--category.node--unread .node-icon i {
        color: #9e5697;
    }
}
/**********/

Spoiler: XF 2.2.2 hoặc cao hơn

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:

/* 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;
    }
}
/**********/

Spoiler: XF 2.2.1 hoặc thấp hơn

/* 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

Spoiler: XF 2.3

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 cho biểu tượng read trên code hoặc check code dưới đây để hiểu rõ hơn:

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node-- read .node-icon i, .subNodeLink.subNodeLink--forum .subNodeLink-icon,
    .node--category.node--read .node-icon i, .node--link .node-icon i {
        color: #e6cbe4;
    }
    /* unread icon */
    .node--forum.node-- unread .node-icon i, .subNodeLink.subNodeLink--forum.subNodeLink--unread .subNodeLink-icon, .node--category.node--unread .node-icon i {
        color: #9e5697;
    }
}
/**********/

Spoiler: XF 2.2.2 hoặc cao hơn

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:

/* 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;
    }
}
/**********/

Spoiler: XF 2.2.1 hoặc thấp hơn

/* 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

Spoiler: XF 2.3

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 cho biểu tượng read trên code hoặc check code dưới đây để hiểu rõ hơn:

/* Coloured Node Icons */
.block.block--category.block--categoryX {
    /* read icon */
    .node--forum.node-- read .node-icon i, .subNodeLink.subNodeLink--forum .subNodeLink-icon,
    .node--category.node--read .node-icon i, .node--link .node-icon i, .node--page .node-icon i {
        color: #e6cbe4;
    }
    /* unread icon */
    .node--forum.node-- unread .node-icon i, .subNodeLink.subNodeLink--forum.subNodeLink--unread .subNodeLink-icon, .node--category.node--unread .node-icon i {
        color: #9e5697;
    }
}
/**********/

Spoiler: XF 2.2.2 hoặc cao hơn

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:

/* 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;
    }
}
/**********/

Spoiler: XF 2.2.1 hoặc thấp hơn

/* 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]

Update cho XF 2.2.2

 

[PVS]

Update cho XenForo 2.3