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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,228
Được Like
11,630
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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,228
Được Like
11,630
Update cho XF 2.2.2
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom