Hướng dẫn Custom Node Status Icons - Tùy chỉnh biểu tượng trạng thái Node (Đọc & Chưa đọc)

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,833
Được Like
12,691
Custom Node Status Icons - Tùy chỉnh biểu tượng trạng thái Node (Đọc & Chưa đọc)

Các id node bao gồm trong template, cho phép chúng ta dễ dàng thay đổi các biểu tượng trạng thái mà không có bất kỳ chỉnh sửa template phức tạp.

thgJXNZ.png

Trong ACP tìm đến teplate EXTRA.css và nhập CSS sau đây cho mỗi biểu tượng tùy chỉnh:
Mã:
/* custom status icons */
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}

Trong ví dụ trên, chúng ta đang thay thế các biểu tượng trạng thái từ một node có id là 7

Các id node là duy nhất cho mỗi node trên diễn đàn của bạn vì vậy hãy chắc chắn để nhập id chính xác trong css.

Trong ví dụ trên, chúng ta cũng đã tiến vào những hình ảnh tùy chỉnh trong vị trí mặc định của các biểu tượng mặc định và chỉ cần đổi lại tên với các id node vào cuối tên cho đơn giản forum-unread-7.png và forum-read-7.png

Không có gì ngăn bạn khỏi việc đặt chúng trong một thư mục tùy chỉnh hoặc đặt tên chúng khác nhau.

Cách xác định id node chính xác cho một node cụ thể?

Trong XenForo Admin CP đi đến Application, Display Node Tree..

Dưới Node Tree chỉ cần đưa chuột vào tên của các node diễn đàn hoặc bấm vào chúng để chỉnh sửa và bạn thấy id thực tế trong URL

Ví dụ: http://xenforo.dev/admin.php?nodes/official-forums.7/edit

7 là id chính xác cho "Official Forums", nên biểu tượng sẽ được đặt tên là forum-unread-7.png và forum-read-7.png

xdC4zmB.png

Còn bối rối?

Hãy chỉ nói rằng ví dụ bạn muốn thay đổi các biểu tượng của các node với ID 2,7 và 15

CSS của bạn sẽ trông như thế này
Mã:
/* custom status icons */

/* node id 2*/
.node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-2.png");
}
.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-2.png");
}
/* node id 7*/
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}
/* node id 15*/
.node .node_15 .forumNodeInfo .nodeIcon, .node .node_15 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-15.png");
}
.node .node_15 .forumNodeInfo.unread .nodeIcon, .node .node_15 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-15.png");
}

Kích thước cần cho hình ảnh là bao nhiêu?

Trong XenForo, hình ảnh trạng thái mặc định có kích thước là 40px 40px.
Khuyên bạn nên tạo hình ảnh tùy chỉnh của bạn có kích thước giống như mặc định để tránh cho chúng không bị cắt bỏ hoặc pixelated.

Nếu bạn muốn thay đổi kích thước hình ảnh và sử dụng những hình ảnh lớn hơn, bạn có thể chỉnh sửa kích thước mặc định ở đây:

Appearance > Styles > Default Style (or your style name) > Style Property Groups > Style Properties: Forum List > Node Icon

Thay đổi width và height từ 36px mặc định thành kích thước tùy chỉnh mới của bạn.

tRmCYLV.png

Chúc các bạn thành công.


Nguồn: xenforo.rocks​
 

Lananh123

Private
Tham gia
10/06/2019
Bài viết
27
Được Like
2
Custom Node Status Icons - Tùy chỉnh biểu tượng trạng thái Node (Đọc & Chưa đọc)

Các id node bao gồm trong template, cho phép chúng ta dễ dàng thay đổi các biểu tượng trạng thái mà không có bất kỳ chỉnh sửa template phức tạp.

Trong ACP tìm đến teplate EXTRA.css và nhập CSS sau đây cho mỗi biểu tượng tùy chỉnh:
Mã:
/* custom status icons */
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}

Trong ví dụ trên, chúng ta đang thay thế các biểu tượng trạng thái từ một node có id là 7

Các id node là duy nhất cho mỗi node trên diễn đàn của bạn vì vậy hãy chắc chắn để nhập id chính xác trong css.

Trong ví dụ trên, chúng ta cũng đã tiến vào những hình ảnh tùy chỉnh trong vị trí mặc định của các biểu tượng mặc định và chỉ cần đổi lại tên với các id node vào cuối tên cho đơn giản forum-unread-7.png và forum-read-7.png

Không có gì ngăn bạn khỏi việc đặt chúng trong một thư mục tùy chỉnh hoặc đặt tên chúng khác nhau.

Cách xác định id node chính xác cho một node cụ thể?

Trong XenForo Admin CP đi đến Application, Display Node Tree..

Dưới Node Tree chỉ cần đưa chuột vào tên của các node diễn đàn hoặc bấm vào chúng để chỉnh sửa và bạn thấy id thực tế trong URL

Ví dụ: http://xenforo.dev/admin.php?nodes/official-forums.7/edit

7 là id chính xác cho "Official Forums", nên biểu tượng sẽ được đặt tên là forum-unread-7.png và forum-read-7.png

Còn bối rối?

Hãy chỉ nói rằng ví dụ bạn muốn thay đổi các biểu tượng của các node với ID 2,7 và 15

CSS của bạn sẽ trông như thế này
Mã:
/* custom status icons */

/* node id 2*/
.node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-2.png");
}
.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-2.png");
}
/* node id 7*/
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}
/* node id 15*/
.node .node_15 .forumNodeInfo .nodeIcon, .node .node_15 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-15.png");
}
.node .node_15 .forumNodeInfo.unread .nodeIcon, .node .node_15 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-15.png");
}

Kích thước cần cho hình ảnh là bao nhiêu?

Trong XenForo, hình ảnh trạng thái mặc định có kích thước là 40px 40px.
Khuyên bạn nên tạo hình ảnh tùy chỉnh của bạn có kích thước giống như mặc định để tránh cho chúng không bị cắt bỏ hoặc pixelated.

Nếu bạn muốn thay đổi kích thước hình ảnh và sử dụng những hình ảnh lớn hơn, bạn có thể chỉnh sửa kích thước mặc định ở đây:

Appearance > Styles > Default Style (or your style name) > Style Property Groups > Style Properties: Forum List > Node Icon

Thay đổi width và height từ 36px mặc định thành kích thước tùy chỉnh mới của bạn.

Chúc các bạn thành công.


Nguồn: xenforo.rocks​
Anh ơi em vào làm theo anh nhưng không được gần như icon vẫn giữ nguyên mặc định ạ
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram:

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom