User Ranks in CSS - User Ranks trong CSS 1.0

[PVS]

User Ranks in CSS - User Ranks trong CSS 1.0

Mô tả: Mod này bổ sung thêm user ranks tạo ra với HTML và CSS, vì vậy không có hình ảnh bổ sung được yêu cầu. Ví dụ kèm theo cho thấy các màu sắc tự động thích ứng khi màu style được thay đổi với bảng màu XenForo.

Các văn bản thứ hạng có thể được thay đổi bằng cách chỉnh sửa template - không có Photoshop yêu cầu. Bạn có thể thay đổi hình dạng, màu sắc, hình nền và phông chữ thành bất cứ điều gì bạn muốn. Vì vậy, bạn thực sự có thể thiết kế user ranks theo cá nhân của riêng bạn!

​

Hướng dẫn
Bước 1: Mở template: message_user_info tìm:

<xen:if hascontent="true">
<div class="extraUserInfo">

Thêm vào phía trên nó đoạn code dưới đây:

<!-- Start User Ranks -->
<xen:if is="{$user.is_admin}">
<span class="userrank">Administrator</span>
</xen:if>

<xen:if is="{$user.is_moderator} AND !{$user.is_admin}">
<span class="userrank">Moderator</span>
</xen:if>

<xen:if is="{$user.user_group_id} == 5">
<span class="userrank">Your_custom_usergroup_name</span>
</xen:if>
<!-- End User Ranks -->

Để hiển thị cấp bậc thích hợp cho các nhóm người dùng khác, bạn sẽ cần một điều kiện mới cho mỗi cấp bậc thêm vào. Thay 5 với ID nhóm người sử dụng thích hợp.

Bước 2: Mở template: EXTRA.css thêm:

/* Start User Ranks */
.userrank {
                                display: block;
                                width: 108px;
                                margin: -2px 0 5px 6px;
                                padding: 2px 0 3px 0;
                                border: 1px solid @primaryLight;
                                border-radius: 5px;
                                background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
                                text-align: center;
                                font: 11px verdana,sans-serif;
                                text-decoration: none;
                                color: @primaryMedium;
                                text-shadow: 1px 1px 0 #fff;
                                outline: 0;
}
/* End User Ranks */

CSS ở trên có thể được chỉnh sửa theo ý thích cá nhân của bạn.

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

Nguồn: xenforo.com​

 

[Jindo_Katori]

Rất đẹp.
Đánh dấu để làm tư liệu học tập sau này.