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

734 0 0
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,688
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 đó.

online-indicators.png

​
Đó 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;
    }
}

online-indicators-xmas.png

​
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;
    }
}

online-indicators-halloween.png

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


Nguồn: xenforo.com​
 
Bài viết liên quan
Làm thế nào đẻ tối ưu mấy cái này xanh hết trên Xenforo? bởi gameboiz1806,
Ở footer của mình bị hiển thị như này. Không biết làm ntn để ẩn được? bởi gameboiz1806,
File Attachment nằm ở đâu trên fpt hosting vậy cả nhà nhỉ bởi bloghocpiano,
Mình đã cài Litespeed nhưng LS không nhận bởi gameboiz1806,
Làm thế nào để gửi email cho users về các thread mới 1 tuần một lần? bởi gameboiz1806,
AE biết CDN nào mà ae xenforo hay sử dụng không? bởi gameboiz1806,
Được quan tâm
Làm thế nào đẻ tối ưu mấy cái này xanh hết trên Xenforo? bởi gameboiz1806,
Bài viết mới
Làm thế nào đẻ tối ưu mấy cái này xanh hết trên Xenforo? bởi gameboiz1806,
Ở footer của mình bị hiển thị như này. Không biết làm ntn để ẩn được? bởi gameboiz1806,
File Attachment nằm ở đâu trên fpt hosting vậy cả nhà nhỉ bởi bloghocpiano,
Mình đã cài Litespeed nhưng LS không nhận bởi gameboiz1806,
Làm thế nào để gửi email cho users về các thread mới 1 tuần một lần? bởi gameboiz1806,
gặp sự cố khi upgrade bởi sanhpv,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Tutorial 2x Animated online indicator - Chỉ báo trực tuyến hoạt ảnh cho XenForo 2.2 Tips and Guides 0
Thức Nguyễn Help Thống kê thành viên online và đang xem chủ đề trên TOP xenforo2 Tips and Guides 3
PVS 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 1
PVS Tutorial 2x Online indicator - Thêm chỉ thị trực tuyến cho XenForo 2 Tips and Guides 0
PVS Tutorial 2x Status indicator online or offline - Chỉ thị trạng thái online hoặc offline cho XenForo 2 Tips and Guides 0

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom