- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
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:
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
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.
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.
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
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.
Nguồn: xenforo.rocks
Bài viết liên quan
Bài viết mới
