Tùy chỉnh icon cho mỗi chuyên mục xenforo

[PVS]

Sau đây mình hướng dẫn các bạn chỉnh css, tạo icon cho mỗi chuyên mục (box, node) trong xenforo.

Mở extra.css và thêm vào dưới cùng

/** Custom Node Icons **/
.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
padding: 2px 0;
}

html .node .nodeIcon {
margin: 6px;
width: 36px;
height: 36px;
}

.node.node_2 .nodeIcon {
background: transparent url("/link-dan-den-hinh-icon.png") no-repeat top left !important;
}

Bạn có thể thay đổi .node.node_2, con số này là ID chuyên mục mà bạn muốn đặt icon đại diện. Muốn thêm 1 biểu tượng thì bạn phải thêm 1 class và nhớ đổi ID cho nó.
Ví dụ bạn muốn thay cho 1 icon cho chuyên mục có ID là 5 thì thêm 1 dòng như sau

.node.node_5 .nodeIcon {
background: transparent url("/link-dan-den-hinh-icon.png") no-repeat top left !important;
}

Chú ý: Bạn có thể chỉnh sửa chiều rộng và cao cho mỗi icon để phù hợp với giao diện đang dùng nhé.

Bổ xung: Hướng dẫn đổi màu cho từng node trong xenforo

Copy đoạn code sau vào Extra.css :

.node.category.level_1.node_3 .nodeInfo.categoryNodeInfo.categoryStrip {
background-color: #339933;
}

Thay số 3 bằng ID của category cần đổi màu.

Nguồn: muaban47.net​

 

[Jindo_Katori]

Trong trường hợp ai muốn sử dụng addon có thể sử dụng 1 trong 2 addon sau:
http://vnxf.vn/brivium-custom-node-style-v1-2-0.t123.html
http://vnxf.vn/cai-dat-addon-icon-tung-chuyen-muc.t726.html

 

[evansplus95]

Sao em sửa icon cho các chuyên mục toàn bị lỗi được nhỉ . Cho em ké hỏi luôn là phân quền vip với member mới luôn với ạ

 

[cuongcongnghe]

Xenforo 2 co ap dung duoc khong Admin

 

[PVS]

do xen2 có thay đổi cấu trúc, mình cũng chưa thử nên cũng không rõ nó có tác dụng không nữa

 

[congtubot]

Của mị dùng thế này sao nó không hiện nhể
/** Custom Node Icons **/
.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
padding: 2px 0;
}

html .node .nodeIcon {
margin: 6px;
width: 36px;
height: 36px;
}

.node.node_4 .nodeIcon {
background: transparent url("/https:lh3.googleusercontent.com/MSRffu0u-k9l2o272czxPdRqvz3vE3pYDkW4DnqQ3fYwxFQdz-YAb-4eTsxzj-40xiyQmQOApUS77z3ePuNl=s400.png") no-repeat top left !important;
}

Link có // , nhưng chưa đủ 5 post không gửi được :c

 

[NDK]

Của mị dùng thế này sao nó không hiện nhể
/** Custom Node Icons **/
.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
padding: 2px 0;
}

html .node .nodeIcon {
margin: 6px;
width: 36px;
height: 36px;
}

.node.node_4 .nodeIcon {
background: transparent url("/https:lh3.googleusercontent.com/MSRffu0u-k9l2o272czxPdRqvz3vE3pYDkW4DnqQ3fYwxFQdz-YAb-4eTsxzj-40xiyQmQOApUS77z3ePuNl=s400.png") no-repeat top left !important;
}

Link có // , nhưng chưa đủ 5 post không gửi được :c

Mị dùng xen mấy, xen2 chưa đc đâu nhé

 

[huynhvantam123]

làm sao để xem được ID chuyên mục là bao nhiêu vậy ạ

 

[PVS]

làm sao để xem được ID chuyên mục là bao nhiêu vậy ạ

Bạn vào 1 chuyên mục bất kỳ và nhìn vào URL của nó nhé.