Tutorial 2x Node icons with image - Biểu tượng Node bằng hình ảnh cho XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,697
Node icons with image - Biểu tượng Node bằng hình ảnh cho XenForo 2

Bạn có muốn thay đổi biểu tượng node Font Awesome mặc định của mình bằng hình ảnh như thế này không?

Screenshot 2019-11-09 at 11.51.00.png

Node đã xem

Screenshot 2019-11-09 at 11.51.11.png

Node chưa xem
Để thay đổi biểu tượng node bằng hình ảnh, hãy thêm đoạn code sau vào template Extra.less của bạn:
Mã:
/*** Node icons with image **/
.node.node--idX {
    .node-icon i { display: none; }

    &.node--forum {
        .node-body {
            /*padding-left: 5px;*/
        }
        .node-icon {
            background-image: url('/images/your_image.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}
/*****/

Thay X bằng ID node của bạn.

Thay /images/your_image.png bằng vị trí hình ảnh của bạn.

Nếu node của bạn là một categoy, page hoặc link, hãy thay đổi .node--forum thành .node--category, .node--page hoặc .node--link

Cách để thay đổi biểu tượng node có cùng hình ảnh cho tất cả các node và category:

Thêm đoạn code này vào template Extra.less của bạn:
Mã:
/*** Node icons with image **/
.node {
    .node-icon i { display: none; }

    &.node--forum, &.node--category {
        .node-body {
            /*padding-left: 5px;*/
        }
        .node-icon {
            background-image: url('/images/your_image.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}
/*****/

Thay /images/your_image.png bằng vị trí hình ảnh của bạn.

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

Nguồn: xenforo.com​
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

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