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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,246
Được Like
11,659
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​
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom