Tutorial 2x Online indicator based on user ID - Chỉ thị trực tuyến dựa trên ID người dùng XenForo 2

PVS · 24/10/2019

Online indicator based on user ID - Chỉ thị trực tuyến dựa trên ID người dùng XenForo 2

Bạn chán với cùng một chỉ thị trực tuyến cho tất cả mọi người?

Bài viết này sẽ hướng dẫn bạn cách thay đổi điều đó.

Đó là lựa chọn 10 chỉ thị khác nhau được tự động áp dụng dựa trên ID người dùng.

Thực hiện rất đơn giản.
Nó bao gồm một chỉnh sửa template và một số CSS cho mỗi biểu tượng.
CSS có thể được áp dụng cho mỗi kiểu thông qua template Extra.less.

Bước đầu tiên là chỉnh sửa template message_macros.

Tìm đoạn code sau (khoảng dòng thứ 10):

Mã:

<span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>

Thay bằng:

Mã:

<xf:set var="$ctaOnlineIconValue" value="{{ $user.user_id % 10 }}" />
<span class="message-avatar-online ctaOnlineIcon--{$ctaOnlineIconValue}" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>

Vui lòng thay đổi tên của biến (ctaOnlineIconValue) và class CSS (ctaOnlineIcon--) như bạn muốn.

Chỉ cần đảm bảo rằng bạn sử dụng cùng tên trong template Extra.less nếu bạn làm như vậy.

Sau đó, tất cả những gì bạn phải làm là thêm CSS tùy chỉnh của bạn vào template Extra.less.

Bạn sẽ cần một mục duy nhất (tổng cộng 10) cho mỗi giá trị từ 0 đến 9 cho class ctaOnlineIcon--, như sau:

Mã:

message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--0
{
    &:before {
        .m-faContent(@fa-var-star);
        color: gold;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--1
{
    &:before {
        .m-faContent(@fa-var-cube);
        color: green;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--2
{
    &:before {
        .m-faContent(@fa-var-circle);
        color: blue;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--3
{
    &:before {
        .m-faContent(@fa-var-triangle);
        color: orange;
    }
}

...

Các bạn tự thêm code theo ý mình nhé.

Tiếp theo đây sẽ là 2 mẫu có sẵn cho các bạn:

1. Mẫu giáng sinh:

Mã:

/* #### Online Indicator #### */
.message-avatar-wrapper .message-avatar-online
{
    left: 48%;
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--0
{
    &:before {
        .m-faContent(@fa-var-sleigh);
        color: #ee0010;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--1
{
    &:before {
        .m-faContent(@fa-var-bells);
        color: #ffd700;
        background: #008400;
        border: #008400 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--2
{
    &:before {
        .m-faContent(@fa-var-candy-cane);
        color: #e75480;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--3
{
    &:before {
        .m-faContent(@fa-var-deer-rudolph);
        color: #654321;
        background: #fffafa;
        border: #fffafa solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--4
{
    &:before {
        .m-faContent(@fa-var-gifts);
        color: #800080;
        background: #ffdd4b;
        border: #ffdd4b solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--5
{
    &:before {
        .m-faContent(@fa-var-glass-cheers);
        color: #ffe9ca;
        background: #d2222f;
        border: #d2222f solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--6
{
    &:before {
        .m-faContent(@fa-var-hat-santa);
        color: #ee0010;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--7
{
    &:before {
        .m-faContent(@fa-var-holly-berry);
        color: #008800;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--8
{
    &:before {
        .m-faContent(@fa-var-snowman);
        color: #fffafa;
        background: #87ceeb;
        border: #87ceeb solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--9
{
    &:before {
        .m-faContent(@fa-var-tree-decorated);
        color: #006600;
        background: #edf6fd;
        border: #edf6fd solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

2. Mẫu Halloween:

Mã:

/* #### Online Indicator #### */
.message-avatar-wrapper .message-avatar-online
{
    left: 48%;
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--0
{
    &:before {
        .m-faContent(@fa-var-broom);
        color: #654321;
        background: #e8ecef;
        border: #e8ecef solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--1
{
    &:before {
        .m-faContent(@fa-var-bat);
        color: #000000;
        background: #4678b3;
        border: #4678b3 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--2
{
    &:before {
        .m-faContent(@fa-var-cauldron);
        color: #111;
        background: #489466;
        border: #489466 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--3
{
    &:before {
        .m-faContent(@fa-var-coffin);
        color: #654321;
        background: #aaaaaa;
        border: #aaaaaa solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--4
{
    &:before {
        .m-faContent(@fa-var-ghost);
        color: #f8f8ff;
        background: #171139;
        border: #171139 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--5
{
    &:before {
        .m-faContent(@fa-var-hat-witch);
        color: #000000;
        background: #489466;
        border: #489466 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--6
{
    &:before {
        .m-faContent(@fa-var-hat-wizard);
        color: #000000;
        background: #a885bf;
        border: #a885bf solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--7
{
    &:before {
        .m-faContent(@fa-var-hockey-mask);
        color: #ffffff;
        background: #1e1e46;
        border: #1e1e46 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--8
{
    &:before {
        .m-faContent(@fa-var-jack-o-lantern);
        color: #ff7518;
        background: #000000;
        border: #000000 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--9
{
    &:before {
        .m-faContent(@fa-var-spider-black-widow);
        color: #000000;
        background: #ce0018;
        border: #ce0018 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

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

Nguồn: xenforo.com

Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
Tutorial 2x Animated online indicator - Chỉ báo trực tuyến hoạt ảnh cho XenForo 2.2	Tips and Guides	0	11/08/2022
Help Thống kê thành viên online và đang xem chủ đề trên TOP xenforo2	Tips and Guides	3	31/05/2021
Tutorial 2x Online/Offline avatar indicator like instagram - Chỉ báo trực tuyến/ngoại tuyến hình đại diện như instagram cho XenForo 2	Tips and Guides	2	21/01/2021
Tutorial 2x Online indicator - Thêm chỉ thị trực tuyến cho XenForo 2	Tips and Guides	0	04/06/2018
Tutorial 2x Status indicator online or offline - Chỉ thị trạng thái online hoặc offline cho XenForo 2	Tips and Guides	0	15/03/2018

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Tutorial 2x Online indicator based on user ID - Chỉ thị trực tuyến dựa trên ID người dùng XenForo 2

PVS

Super Moderator

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT